{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--BOOK_INFORMATION-->\n",
    "<a href=\"https://user-images.githubusercontent.com/19553554/71825144-2d568180-30d6-11ea-8ee0-63c849cfd934.png\" target=\"_blank\"><img align=\"left\" style=\"width: 76px; height: 100px; background: white; padding: 1px; border: 1px solid black; margin-right:10px;\"></a>\n",
    "*pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，为了与 Python 进行对接，方便在 Python 中直接使用数据生成图，于是有人开发出了这个项目[GitHub](https://github.com/pyecharts/pyecharts) .*\n",
    "\n",
    "*Note.建议本程序在参看https://github.com/pyecharts/pyecharts 的安装步骤后再运行； 本程序所有的例子都是从官方提供的样例代码[GitHub](https://github.com/pyecharts/pyecharts-gallery)中提取的,如果对某个API有疑问建议在IDE里面查看*\n",
    "\n",
    "*Echart类型图种大全:https://echarts.apache.org/examples/zh/#chart-type-line pyecharts图导入到ppt中的方法:https://baijiahao.baidu.com/s?id=1663839456876951842&wfr=spider&for=pc.*\n",
    "\n",
    "*作者: LBQ; 时间:2020/7/24. 邮箱:779660843@qq.com*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Ⅵ.烛台形/K线图(Candlestick)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## K线图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"e5f3e7375e084b2b9a4ccc9e5a73c0d0\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_e5f3e7375e084b2b9a4ccc9e5a73c0d0 = echarts.init(\n",
       "                    document.getElementById('e5f3e7375e084b2b9a4ccc9e5a73c0d0'), 'white', {renderer: 'canvas'});\n",
       "                var option_e5f3e7375e084b2b9a4ccc9e5a73c0d0 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"candlestick\",\n",
       "            \"name\": \"kline\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    2320.26,\n",
       "                    2320.26,\n",
       "                    2287.3,\n",
       "                    2362.94\n",
       "                ],\n",
       "                [\n",
       "                    2300,\n",
       "                    2291.3,\n",
       "                    2288.26,\n",
       "                    2308.38\n",
       "                ],\n",
       "                [\n",
       "                    2295.35,\n",
       "                    2346.5,\n",
       "                    2295.35,\n",
       "                    2345.92\n",
       "                ],\n",
       "                [\n",
       "                    2347.22,\n",
       "                    2358.98,\n",
       "                    2337.35,\n",
       "                    2363.8\n",
       "                ],\n",
       "                [\n",
       "                    2360.75,\n",
       "                    2382.48,\n",
       "                    2347.89,\n",
       "                    2383.76\n",
       "                ],\n",
       "                [\n",
       "                    2383.43,\n",
       "                    2385.42,\n",
       "                    2371.23,\n",
       "                    2391.82\n",
       "                ],\n",
       "                [\n",
       "                    2377.41,\n",
       "                    2419.02,\n",
       "                    2369.57,\n",
       "                    2421.15\n",
       "                ],\n",
       "                [\n",
       "                    2425.92,\n",
       "                    2428.15,\n",
       "                    2417.58,\n",
       "                    2440.38\n",
       "                ],\n",
       "                [\n",
       "                    2411,\n",
       "                    2433.13,\n",
       "                    2403.3,\n",
       "                    2437.42\n",
       "                ],\n",
       "                [\n",
       "                    2432.68,\n",
       "                    2334.48,\n",
       "                    2427.7,\n",
       "                    2441.73\n",
       "                ],\n",
       "                [\n",
       "                    2430.69,\n",
       "                    2418.53,\n",
       "                    2394.22,\n",
       "                    2433.89\n",
       "                ],\n",
       "                [\n",
       "                    2416.62,\n",
       "                    2432.4,\n",
       "                    2414.4,\n",
       "                    2443.03\n",
       "                ],\n",
       "                [\n",
       "                    2441.91,\n",
       "                    2421.56,\n",
       "                    2418.43,\n",
       "                    2444.8\n",
       "                ],\n",
       "                [\n",
       "                    2420.26,\n",
       "                    2382.91,\n",
       "                    2373.53,\n",
       "                    2427.07\n",
       "                ],\n",
       "                [\n",
       "                    2383.49,\n",
       "                    2397.18,\n",
       "                    2370.61,\n",
       "                    2397.94\n",
       "                ],\n",
       "                [\n",
       "                    2378.82,\n",
       "                    2325.95,\n",
       "                    2309.17,\n",
       "                    2378.82\n",
       "                ],\n",
       "                [\n",
       "                    2322.94,\n",
       "                    2314.16,\n",
       "                    2308.76,\n",
       "                    2330.88\n",
       "                ],\n",
       "                [\n",
       "                    2320.62,\n",
       "                    2325.82,\n",
       "                    2315.01,\n",
       "                    2338.78\n",
       "                ],\n",
       "                [\n",
       "                    2313.74,\n",
       "                    2293.34,\n",
       "                    2289.89,\n",
       "                    2340.71\n",
       "                ],\n",
       "                [\n",
       "                    2297.77,\n",
       "                    2313.22,\n",
       "                    2292.03,\n",
       "                    2324.63\n",
       "                ],\n",
       "                [\n",
       "                    2322.32,\n",
       "                    2365.59,\n",
       "                    2308.92,\n",
       "                    2366.16\n",
       "                ],\n",
       "                [\n",
       "                    2364.54,\n",
       "                    2359.51,\n",
       "                    2330.86,\n",
       "                    2369.65\n",
       "                ],\n",
       "                [\n",
       "                    2332.08,\n",
       "                    2273.4,\n",
       "                    2259.25,\n",
       "                    2333.54\n",
       "                ],\n",
       "                [\n",
       "                    2274.81,\n",
       "                    2326.31,\n",
       "                    2270.1,\n",
       "                    2328.14\n",
       "                ],\n",
       "                [\n",
       "                    2333.61,\n",
       "                    2347.18,\n",
       "                    2321.6,\n",
       "                    2351.44\n",
       "                ],\n",
       "                [\n",
       "                    2340.44,\n",
       "                    2324.29,\n",
       "                    2304.27,\n",
       "                    2352.02\n",
       "                ],\n",
       "                [\n",
       "                    2326.42,\n",
       "                    2318.61,\n",
       "                    2314.59,\n",
       "                    2333.67\n",
       "                ],\n",
       "                [\n",
       "                    2314.68,\n",
       "                    2310.59,\n",
       "                    2296.58,\n",
       "                    2320.96\n",
       "                ],\n",
       "                [\n",
       "                    2309.16,\n",
       "                    2286.6,\n",
       "                    2264.83,\n",
       "                    2333.29\n",
       "                ],\n",
       "                [\n",
       "                    2282.17,\n",
       "                    2263.97,\n",
       "                    2253.25,\n",
       "                    2286.33\n",
       "                ],\n",
       "                [\n",
       "                    2255.77,\n",
       "                    2270.28,\n",
       "                    2253.31,\n",
       "                    2276.22\n",
       "                ]\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"kline\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"kline\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2017/7/1\",\n",
       "                \"2017/7/2\",\n",
       "                \"2017/7/3\",\n",
       "                \"2017/7/4\",\n",
       "                \"2017/7/5\",\n",
       "                \"2017/7/6\",\n",
       "                \"2017/7/7\",\n",
       "                \"2017/7/8\",\n",
       "                \"2017/7/9\",\n",
       "                \"2017/7/10\",\n",
       "                \"2017/7/11\",\n",
       "                \"2017/7/12\",\n",
       "                \"2017/7/13\",\n",
       "                \"2017/7/14\",\n",
       "                \"2017/7/15\",\n",
       "                \"2017/7/16\",\n",
       "                \"2017/7/17\",\n",
       "                \"2017/7/18\",\n",
       "                \"2017/7/19\",\n",
       "                \"2017/7/20\",\n",
       "                \"2017/7/21\",\n",
       "                \"2017/7/22\",\n",
       "                \"2017/7/23\",\n",
       "                \"2017/7/24\",\n",
       "                \"2017/7/25\",\n",
       "                \"2017/7/26\",\n",
       "                \"2017/7/27\",\n",
       "                \"2017/7/28\",\n",
       "                \"2017/7/29\",\n",
       "                \"2017/7/30\",\n",
       "                \"2017/7/31\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Kline-\\u57fa\\u672c\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_e5f3e7375e084b2b9a4ccc9e5a73c0d0.setOption(option_e5f3e7375e084b2b9a4ccc9e5a73c0d0);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f21c0582358>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data = [\n",
    "    [2320.26, 2320.26, 2287.3, 2362.94],\n",
    "    [2300, 2291.3, 2288.26, 2308.38],\n",
    "    [2295.35, 2346.5, 2295.35, 2345.92],\n",
    "    [2347.22, 2358.98, 2337.35, 2363.8],\n",
    "    [2360.75, 2382.48, 2347.89, 2383.76],\n",
    "    [2383.43, 2385.42, 2371.23, 2391.82],\n",
    "    [2377.41, 2419.02, 2369.57, 2421.15],\n",
    "    [2425.92, 2428.15, 2417.58, 2440.38],\n",
    "    [2411, 2433.13, 2403.3, 2437.42],\n",
    "    [2432.68, 2334.48, 2427.7, 2441.73],\n",
    "    [2430.69, 2418.53, 2394.22, 2433.89],\n",
    "    [2416.62, 2432.4, 2414.4, 2443.03],\n",
    "    [2441.91, 2421.56, 2418.43, 2444.8],\n",
    "    [2420.26, 2382.91, 2373.53, 2427.07],\n",
    "    [2383.49, 2397.18, 2370.61, 2397.94],\n",
    "    [2378.82, 2325.95, 2309.17, 2378.82],\n",
    "    [2322.94, 2314.16, 2308.76, 2330.88],\n",
    "    [2320.62, 2325.82, 2315.01, 2338.78],\n",
    "    [2313.74, 2293.34, 2289.89, 2340.71],\n",
    "    [2297.77, 2313.22, 2292.03, 2324.63],\n",
    "    [2322.32, 2365.59, 2308.92, 2366.16],\n",
    "    [2364.54, 2359.51, 2330.86, 2369.65],\n",
    "    [2332.08, 2273.4, 2259.25, 2333.54],\n",
    "    [2274.81, 2326.31, 2270.1, 2328.14],\n",
    "    [2333.61, 2347.18, 2321.6, 2351.44],\n",
    "    [2340.44, 2324.29, 2304.27, 2352.02],\n",
    "    [2326.42, 2318.61, 2314.59, 2333.67],\n",
    "    [2314.68, 2310.59, 2296.58, 2320.96],\n",
    "    [2309.16, 2286.6, 2264.83, 2333.29],\n",
    "    [2282.17, 2263.97, 2253.25, 2286.33],\n",
    "    [2255.77, 2270.28, 2253.31, 2276.22],\n",
    "]\n",
    "\n",
    "from pyecharts.charts import Kline\n",
    "kline_base = (\n",
    "    Kline()\n",
    "    .add_xaxis([\"2017/7/{}\".format(i + 1) for i in range(31)])\n",
    "    .add_yaxis(\"kline\", data)\n",
    "    .set_global_opts(\n",
    "        yaxis_opts=opts.AxisOpts(is_scale=True),\n",
    "        xaxis_opts=opts.AxisOpts(is_scale=True),\n",
    "        title_opts=opts.TitleOpts(title=\"Kline-基本示例\"),\n",
    "    )\n",
    "    #.render(\"kline_base.html\")\n",
    ")\n",
    "kline_base.load_javascript()\n",
    "kline_base.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 基础示例"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"ab62b34d89594447bf6b2aae8121b24d\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_ab62b34d89594447bf6b2aae8121b24d = echarts.init(\n",
       "                    document.getElementById('ab62b34d89594447bf6b2aae8121b24d'), 'white', {renderer: 'canvas'});\n",
       "                var option_ab62b34d89594447bf6b2aae8121b24d = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"candlestick\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    20,\n",
       "                    30,\n",
       "                    10,\n",
       "                    35\n",
       "                ],\n",
       "                [\n",
       "                    40,\n",
       "                    35,\n",
       "                    30,\n",
       "                    55\n",
       "                ],\n",
       "                [\n",
       "                    33,\n",
       "                    38,\n",
       "                    33,\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    40,\n",
       "                    40,\n",
       "                    32,\n",
       "                    42\n",
       "                ]\n",
       "            ],\n",
       "            \"rippleEffect\": {\n",
       "                \"show\": true,\n",
       "                \"brushType\": \"stroke\",\n",
       "                \"scale\": 2.5,\n",
       "                \"period\": 4\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2017-10-24\",\n",
       "                \"2017-10-25\",\n",
       "                \"2017-10-26\",\n",
       "                \"2017-10-27\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": true,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_ab62b34d89594447bf6b2aae8121b24d.setOption(option_ab62b34d89594447bf6b2aae8121b24d);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f21c0582d68>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import pyecharts.options as opts\n",
    "from pyecharts.charts import Candlestick\n",
    "\n",
    "x_data = [\"2017-10-24\", \"2017-10-25\", \"2017-10-26\", \"2017-10-27\"]\n",
    "y_data = [[20, 30, 10, 35], [40, 35, 30, 55], [33, 38, 33, 40], [40, 40, 32, 42]]\n",
    "\n",
    "cds_base = (\n",
    "    Candlestick()\n",
    "    .add_xaxis(xaxis_data=x_data)\n",
    "    .add_yaxis(series_name=\"\", y_axis=y_data)\n",
    "    .set_series_opts()\n",
    "    .set_global_opts(\n",
    "        yaxis_opts=opts.AxisOpts(\n",
    "            splitline_opts=opts.SplitLineOpts(\n",
    "                is_show=True, linestyle_opts=opts.LineStyleOpts(width=1)\n",
    "            )\n",
    "        )\n",
    "    )\n",
    "    #.render(\"basic_candlestick.html\")\n",
    ")\n",
    "cds_base.load_javascript()\n",
    "cds_base.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 放大式k线图(1)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"1e96523c6c6241d9a43fb60b821be544\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_1e96523c6c6241d9a43fb60b821be544 = echarts.init(\n",
       "                    document.getElementById('1e96523c6c6241d9a43fb60b821be544'), 'white', {renderer: 'canvas'});\n",
       "                var option_1e96523c6c6241d9a43fb60b821be544 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"candlestick\",\n",
       "            \"name\": \"kline\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    2320.26,\n",
       "                    2320.26,\n",
       "                    2287.3,\n",
       "                    2362.94\n",
       "                ],\n",
       "                [\n",
       "                    2300,\n",
       "                    2291.3,\n",
       "                    2288.26,\n",
       "                    2308.38\n",
       "                ],\n",
       "                [\n",
       "                    2295.35,\n",
       "                    2346.5,\n",
       "                    2295.35,\n",
       "                    2345.92\n",
       "                ],\n",
       "                [\n",
       "                    2347.22,\n",
       "                    2358.98,\n",
       "                    2337.35,\n",
       "                    2363.8\n",
       "                ],\n",
       "                [\n",
       "                    2360.75,\n",
       "                    2382.48,\n",
       "                    2347.89,\n",
       "                    2383.76\n",
       "                ],\n",
       "                [\n",
       "                    2383.43,\n",
       "                    2385.42,\n",
       "                    2371.23,\n",
       "                    2391.82\n",
       "                ],\n",
       "                [\n",
       "                    2377.41,\n",
       "                    2419.02,\n",
       "                    2369.57,\n",
       "                    2421.15\n",
       "                ],\n",
       "                [\n",
       "                    2425.92,\n",
       "                    2428.15,\n",
       "                    2417.58,\n",
       "                    2440.38\n",
       "                ],\n",
       "                [\n",
       "                    2411,\n",
       "                    2433.13,\n",
       "                    2403.3,\n",
       "                    2437.42\n",
       "                ],\n",
       "                [\n",
       "                    2432.68,\n",
       "                    2334.48,\n",
       "                    2427.7,\n",
       "                    2441.73\n",
       "                ],\n",
       "                [\n",
       "                    2430.69,\n",
       "                    2418.53,\n",
       "                    2394.22,\n",
       "                    2433.89\n",
       "                ],\n",
       "                [\n",
       "                    2416.62,\n",
       "                    2432.4,\n",
       "                    2414.4,\n",
       "                    2443.03\n",
       "                ],\n",
       "                [\n",
       "                    2441.91,\n",
       "                    2421.56,\n",
       "                    2418.43,\n",
       "                    2444.8\n",
       "                ],\n",
       "                [\n",
       "                    2420.26,\n",
       "                    2382.91,\n",
       "                    2373.53,\n",
       "                    2427.07\n",
       "                ],\n",
       "                [\n",
       "                    2383.49,\n",
       "                    2397.18,\n",
       "                    2370.61,\n",
       "                    2397.94\n",
       "                ],\n",
       "                [\n",
       "                    2378.82,\n",
       "                    2325.95,\n",
       "                    2309.17,\n",
       "                    2378.82\n",
       "                ],\n",
       "                [\n",
       "                    2322.94,\n",
       "                    2314.16,\n",
       "                    2308.76,\n",
       "                    2330.88\n",
       "                ],\n",
       "                [\n",
       "                    2320.62,\n",
       "                    2325.82,\n",
       "                    2315.01,\n",
       "                    2338.78\n",
       "                ],\n",
       "                [\n",
       "                    2313.74,\n",
       "                    2293.34,\n",
       "                    2289.89,\n",
       "                    2340.71\n",
       "                ],\n",
       "                [\n",
       "                    2297.77,\n",
       "                    2313.22,\n",
       "                    2292.03,\n",
       "                    2324.63\n",
       "                ],\n",
       "                [\n",
       "                    2322.32,\n",
       "                    2365.59,\n",
       "                    2308.92,\n",
       "                    2366.16\n",
       "                ],\n",
       "                [\n",
       "                    2364.54,\n",
       "                    2359.51,\n",
       "                    2330.86,\n",
       "                    2369.65\n",
       "                ],\n",
       "                [\n",
       "                    2332.08,\n",
       "                    2273.4,\n",
       "                    2259.25,\n",
       "                    2333.54\n",
       "                ],\n",
       "                [\n",
       "                    2274.81,\n",
       "                    2326.31,\n",
       "                    2270.1,\n",
       "                    2328.14\n",
       "                ],\n",
       "                [\n",
       "                    2333.61,\n",
       "                    2347.18,\n",
       "                    2321.6,\n",
       "                    2351.44\n",
       "                ],\n",
       "                [\n",
       "                    2340.44,\n",
       "                    2324.29,\n",
       "                    2304.27,\n",
       "                    2352.02\n",
       "                ],\n",
       "                [\n",
       "                    2326.42,\n",
       "                    2318.61,\n",
       "                    2314.59,\n",
       "                    2333.67\n",
       "                ],\n",
       "                [\n",
       "                    2314.68,\n",
       "                    2310.59,\n",
       "                    2296.58,\n",
       "                    2320.96\n",
       "                ],\n",
       "                [\n",
       "                    2309.16,\n",
       "                    2286.6,\n",
       "                    2264.83,\n",
       "                    2333.29\n",
       "                ],\n",
       "                [\n",
       "                    2282.17,\n",
       "                    2263.97,\n",
       "                    2253.25,\n",
       "                    2286.33\n",
       "                ],\n",
       "                [\n",
       "                    2255.77,\n",
       "                    2270.28,\n",
       "                    2253.31,\n",
       "                    2276.22\n",
       "                ]\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"kline\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"kline\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2017/7/1\",\n",
       "                \"2017/7/2\",\n",
       "                \"2017/7/3\",\n",
       "                \"2017/7/4\",\n",
       "                \"2017/7/5\",\n",
       "                \"2017/7/6\",\n",
       "                \"2017/7/7\",\n",
       "                \"2017/7/8\",\n",
       "                \"2017/7/9\",\n",
       "                \"2017/7/10\",\n",
       "                \"2017/7/11\",\n",
       "                \"2017/7/12\",\n",
       "                \"2017/7/13\",\n",
       "                \"2017/7/14\",\n",
       "                \"2017/7/15\",\n",
       "                \"2017/7/16\",\n",
       "                \"2017/7/17\",\n",
       "                \"2017/7/18\",\n",
       "                \"2017/7/19\",\n",
       "                \"2017/7/20\",\n",
       "                \"2017/7/21\",\n",
       "                \"2017/7/22\",\n",
       "                \"2017/7/23\",\n",
       "                \"2017/7/24\",\n",
       "                \"2017/7/25\",\n",
       "                \"2017/7/26\",\n",
       "                \"2017/7/27\",\n",
       "                \"2017/7/28\",\n",
       "                \"2017/7/29\",\n",
       "                \"2017/7/30\",\n",
       "                \"2017/7/31\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"splitArea\": {\n",
       "                \"show\": true,\n",
       "                \"areaStyle\": {\n",
       "                    \"opacity\": 1\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Kline-DataZoom-inside\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"inside\",\n",
       "            \"realtime\": true,\n",
       "            \"start\": 20,\n",
       "            \"end\": 80,\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"zoomLock\": false,\n",
       "            \"filterMode\": \"filter\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_1e96523c6c6241d9a43fb60b821be544.setOption(option_1e96523c6c6241d9a43fb60b821be544);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f21c01f4f98>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "kdzi = (\n",
    "    Kline()\n",
    "    .add_xaxis([\"2020/7/{}\".format(i + 1) for i in range(31)])\n",
    "    .add_yaxis(\"kline\", data)\n",
    "    .set_global_opts(\n",
    "        xaxis_opts=opts.AxisOpts(is_scale=True),\n",
    "        yaxis_opts=opts.AxisOpts(\n",
    "            is_scale=True,\n",
    "            splitarea_opts=opts.SplitAreaOpts(\n",
    "                is_show=True, areastyle_opts=opts.AreaStyleOpts(opacity=1)#不透明度\n",
    "            ),\n",
    "        ),\n",
    "        datazoom_opts=[opts.DataZoomOpts(type_=\"inside\")],#自动放大\n",
    "        title_opts=opts.TitleOpts(title=\"Kline-DataZoom-inside\"),\n",
    "    )\n",
    "   # .render(\"kline_datazoom_inside.html\")\n",
    ")\n",
    "kdzi.load_javascript()\n",
    "kdzi.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 放大式k线图(2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"136f8f58a7a644708d6ea7b19499442f\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_136f8f58a7a644708d6ea7b19499442f = echarts.init(\n",
       "                    document.getElementById('136f8f58a7a644708d6ea7b19499442f'), 'white', {renderer: 'canvas'});\n",
       "                var option_136f8f58a7a644708d6ea7b19499442f = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"candlestick\",\n",
       "            \"name\": \"kline\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    2320.26,\n",
       "                    2320.26,\n",
       "                    2287.3,\n",
       "                    2362.94\n",
       "                ],\n",
       "                [\n",
       "                    2300,\n",
       "                    2291.3,\n",
       "                    2288.26,\n",
       "                    2308.38\n",
       "                ],\n",
       "                [\n",
       "                    2295.35,\n",
       "                    2346.5,\n",
       "                    2295.35,\n",
       "                    2345.92\n",
       "                ],\n",
       "                [\n",
       "                    2347.22,\n",
       "                    2358.98,\n",
       "                    2337.35,\n",
       "                    2363.8\n",
       "                ],\n",
       "                [\n",
       "                    2360.75,\n",
       "                    2382.48,\n",
       "                    2347.89,\n",
       "                    2383.76\n",
       "                ],\n",
       "                [\n",
       "                    2383.43,\n",
       "                    2385.42,\n",
       "                    2371.23,\n",
       "                    2391.82\n",
       "                ],\n",
       "                [\n",
       "                    2377.41,\n",
       "                    2419.02,\n",
       "                    2369.57,\n",
       "                    2421.15\n",
       "                ],\n",
       "                [\n",
       "                    2425.92,\n",
       "                    2428.15,\n",
       "                    2417.58,\n",
       "                    2440.38\n",
       "                ],\n",
       "                [\n",
       "                    2411,\n",
       "                    2433.13,\n",
       "                    2403.3,\n",
       "                    2437.42\n",
       "                ],\n",
       "                [\n",
       "                    2432.68,\n",
       "                    2334.48,\n",
       "                    2427.7,\n",
       "                    2441.73\n",
       "                ],\n",
       "                [\n",
       "                    2430.69,\n",
       "                    2418.53,\n",
       "                    2394.22,\n",
       "                    2433.89\n",
       "                ],\n",
       "                [\n",
       "                    2416.62,\n",
       "                    2432.4,\n",
       "                    2414.4,\n",
       "                    2443.03\n",
       "                ],\n",
       "                [\n",
       "                    2441.91,\n",
       "                    2421.56,\n",
       "                    2418.43,\n",
       "                    2444.8\n",
       "                ],\n",
       "                [\n",
       "                    2420.26,\n",
       "                    2382.91,\n",
       "                    2373.53,\n",
       "                    2427.07\n",
       "                ],\n",
       "                [\n",
       "                    2383.49,\n",
       "                    2397.18,\n",
       "                    2370.61,\n",
       "                    2397.94\n",
       "                ],\n",
       "                [\n",
       "                    2378.82,\n",
       "                    2325.95,\n",
       "                    2309.17,\n",
       "                    2378.82\n",
       "                ],\n",
       "                [\n",
       "                    2322.94,\n",
       "                    2314.16,\n",
       "                    2308.76,\n",
       "                    2330.88\n",
       "                ],\n",
       "                [\n",
       "                    2320.62,\n",
       "                    2325.82,\n",
       "                    2315.01,\n",
       "                    2338.78\n",
       "                ],\n",
       "                [\n",
       "                    2313.74,\n",
       "                    2293.34,\n",
       "                    2289.89,\n",
       "                    2340.71\n",
       "                ],\n",
       "                [\n",
       "                    2297.77,\n",
       "                    2313.22,\n",
       "                    2292.03,\n",
       "                    2324.63\n",
       "                ],\n",
       "                [\n",
       "                    2322.32,\n",
       "                    2365.59,\n",
       "                    2308.92,\n",
       "                    2366.16\n",
       "                ],\n",
       "                [\n",
       "                    2364.54,\n",
       "                    2359.51,\n",
       "                    2330.86,\n",
       "                    2369.65\n",
       "                ],\n",
       "                [\n",
       "                    2332.08,\n",
       "                    2273.4,\n",
       "                    2259.25,\n",
       "                    2333.54\n",
       "                ],\n",
       "                [\n",
       "                    2274.81,\n",
       "                    2326.31,\n",
       "                    2270.1,\n",
       "                    2328.14\n",
       "                ],\n",
       "                [\n",
       "                    2333.61,\n",
       "                    2347.18,\n",
       "                    2321.6,\n",
       "                    2351.44\n",
       "                ],\n",
       "                [\n",
       "                    2340.44,\n",
       "                    2324.29,\n",
       "                    2304.27,\n",
       "                    2352.02\n",
       "                ],\n",
       "                [\n",
       "                    2326.42,\n",
       "                    2318.61,\n",
       "                    2314.59,\n",
       "                    2333.67\n",
       "                ],\n",
       "                [\n",
       "                    2314.68,\n",
       "                    2310.59,\n",
       "                    2296.58,\n",
       "                    2320.96\n",
       "                ],\n",
       "                [\n",
       "                    2309.16,\n",
       "                    2286.6,\n",
       "                    2264.83,\n",
       "                    2333.29\n",
       "                ],\n",
       "                [\n",
       "                    2282.17,\n",
       "                    2263.97,\n",
       "                    2253.25,\n",
       "                    2286.33\n",
       "                ],\n",
       "                [\n",
       "                    2255.77,\n",
       "                    2270.28,\n",
       "                    2253.31,\n",
       "                    2276.22\n",
       "                ]\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"kline\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"kline\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2017/7/1\",\n",
       "                \"2017/7/2\",\n",
       "                \"2017/7/3\",\n",
       "                \"2017/7/4\",\n",
       "                \"2017/7/5\",\n",
       "                \"2017/7/6\",\n",
       "                \"2017/7/7\",\n",
       "                \"2017/7/8\",\n",
       "                \"2017/7/9\",\n",
       "                \"2017/7/10\",\n",
       "                \"2017/7/11\",\n",
       "                \"2017/7/12\",\n",
       "                \"2017/7/13\",\n",
       "                \"2017/7/14\",\n",
       "                \"2017/7/15\",\n",
       "                \"2017/7/16\",\n",
       "                \"2017/7/17\",\n",
       "                \"2017/7/18\",\n",
       "                \"2017/7/19\",\n",
       "                \"2017/7/20\",\n",
       "                \"2017/7/21\",\n",
       "                \"2017/7/22\",\n",
       "                \"2017/7/23\",\n",
       "                \"2017/7/24\",\n",
       "                \"2017/7/25\",\n",
       "                \"2017/7/26\",\n",
       "                \"2017/7/27\",\n",
       "                \"2017/7/28\",\n",
       "                \"2017/7/29\",\n",
       "                \"2017/7/30\",\n",
       "                \"2017/7/31\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"splitArea\": {\n",
       "                \"show\": true,\n",
       "                \"areaStyle\": {\n",
       "                    \"opacity\": 1\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Kline-DataZoom-slider\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"realtime\": true,\n",
       "            \"start\": 20,\n",
       "            \"end\": 80,\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"zoomLock\": false,\n",
       "            \"filterMode\": \"filter\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_136f8f58a7a644708d6ea7b19499442f.setOption(option_136f8f58a7a644708d6ea7b19499442f);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f21c01fabe0>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "kdzs = (\n",
    "    Kline()\n",
    "    .add_xaxis([\"2017/7/{}\".format(i + 1) for i in range(31)])\n",
    "    .add_yaxis(\"kline\", data)\n",
    "    .set_global_opts(\n",
    "        xaxis_opts=opts.AxisOpts(is_scale=True),\n",
    "        yaxis_opts=opts.AxisOpts(\n",
    "            is_scale=True,\n",
    "            splitarea_opts=opts.SplitAreaOpts(\n",
    "                is_show=True, areastyle_opts=opts.AreaStyleOpts(opacity=1)\n",
    "            ),\n",
    "        ),\n",
    "        datazoom_opts=[opts.DataZoomOpts()],#手动放大\n",
    "        title_opts=opts.TitleOpts(title=\"Kline-DataZoom-slider\"),\n",
    "    )\n",
    "    #.render(\"kline_datazoom_slider.html\")\n",
    ")\n",
    "kdzs.load_javascript()\n",
    "kdzs.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 放大式k线图(3)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"89f2c39f52ba433799a8317870005c18\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_89f2c39f52ba433799a8317870005c18 = echarts.init(\n",
       "                    document.getElementById('89f2c39f52ba433799a8317870005c18'), 'white', {renderer: 'canvas'});\n",
       "                var option_89f2c39f52ba433799a8317870005c18 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"candlestick\",\n",
       "            \"name\": \"kline\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    2320.26,\n",
       "                    2320.26,\n",
       "                    2287.3,\n",
       "                    2362.94\n",
       "                ],\n",
       "                [\n",
       "                    2300,\n",
       "                    2291.3,\n",
       "                    2288.26,\n",
       "                    2308.38\n",
       "                ],\n",
       "                [\n",
       "                    2295.35,\n",
       "                    2346.5,\n",
       "                    2295.35,\n",
       "                    2345.92\n",
       "                ],\n",
       "                [\n",
       "                    2347.22,\n",
       "                    2358.98,\n",
       "                    2337.35,\n",
       "                    2363.8\n",
       "                ],\n",
       "                [\n",
       "                    2360.75,\n",
       "                    2382.48,\n",
       "                    2347.89,\n",
       "                    2383.76\n",
       "                ],\n",
       "                [\n",
       "                    2383.43,\n",
       "                    2385.42,\n",
       "                    2371.23,\n",
       "                    2391.82\n",
       "                ],\n",
       "                [\n",
       "                    2377.41,\n",
       "                    2419.02,\n",
       "                    2369.57,\n",
       "                    2421.15\n",
       "                ],\n",
       "                [\n",
       "                    2425.92,\n",
       "                    2428.15,\n",
       "                    2417.58,\n",
       "                    2440.38\n",
       "                ],\n",
       "                [\n",
       "                    2411,\n",
       "                    2433.13,\n",
       "                    2403.3,\n",
       "                    2437.42\n",
       "                ],\n",
       "                [\n",
       "                    2432.68,\n",
       "                    2334.48,\n",
       "                    2427.7,\n",
       "                    2441.73\n",
       "                ],\n",
       "                [\n",
       "                    2430.69,\n",
       "                    2418.53,\n",
       "                    2394.22,\n",
       "                    2433.89\n",
       "                ],\n",
       "                [\n",
       "                    2416.62,\n",
       "                    2432.4,\n",
       "                    2414.4,\n",
       "                    2443.03\n",
       "                ],\n",
       "                [\n",
       "                    2441.91,\n",
       "                    2421.56,\n",
       "                    2418.43,\n",
       "                    2444.8\n",
       "                ],\n",
       "                [\n",
       "                    2420.26,\n",
       "                    2382.91,\n",
       "                    2373.53,\n",
       "                    2427.07\n",
       "                ],\n",
       "                [\n",
       "                    2383.49,\n",
       "                    2397.18,\n",
       "                    2370.61,\n",
       "                    2397.94\n",
       "                ],\n",
       "                [\n",
       "                    2378.82,\n",
       "                    2325.95,\n",
       "                    2309.17,\n",
       "                    2378.82\n",
       "                ],\n",
       "                [\n",
       "                    2322.94,\n",
       "                    2314.16,\n",
       "                    2308.76,\n",
       "                    2330.88\n",
       "                ],\n",
       "                [\n",
       "                    2320.62,\n",
       "                    2325.82,\n",
       "                    2315.01,\n",
       "                    2338.78\n",
       "                ],\n",
       "                [\n",
       "                    2313.74,\n",
       "                    2293.34,\n",
       "                    2289.89,\n",
       "                    2340.71\n",
       "                ],\n",
       "                [\n",
       "                    2297.77,\n",
       "                    2313.22,\n",
       "                    2292.03,\n",
       "                    2324.63\n",
       "                ],\n",
       "                [\n",
       "                    2322.32,\n",
       "                    2365.59,\n",
       "                    2308.92,\n",
       "                    2366.16\n",
       "                ],\n",
       "                [\n",
       "                    2364.54,\n",
       "                    2359.51,\n",
       "                    2330.86,\n",
       "                    2369.65\n",
       "                ],\n",
       "                [\n",
       "                    2332.08,\n",
       "                    2273.4,\n",
       "                    2259.25,\n",
       "                    2333.54\n",
       "                ],\n",
       "                [\n",
       "                    2274.81,\n",
       "                    2326.31,\n",
       "                    2270.1,\n",
       "                    2328.14\n",
       "                ],\n",
       "                [\n",
       "                    2333.61,\n",
       "                    2347.18,\n",
       "                    2321.6,\n",
       "                    2351.44\n",
       "                ],\n",
       "                [\n",
       "                    2340.44,\n",
       "                    2324.29,\n",
       "                    2304.27,\n",
       "                    2352.02\n",
       "                ],\n",
       "                [\n",
       "                    2326.42,\n",
       "                    2318.61,\n",
       "                    2314.59,\n",
       "                    2333.67\n",
       "                ],\n",
       "                [\n",
       "                    2314.68,\n",
       "                    2310.59,\n",
       "                    2296.58,\n",
       "                    2320.96\n",
       "                ],\n",
       "                [\n",
       "                    2309.16,\n",
       "                    2286.6,\n",
       "                    2264.83,\n",
       "                    2333.29\n",
       "                ],\n",
       "                [\n",
       "                    2282.17,\n",
       "                    2263.97,\n",
       "                    2253.25,\n",
       "                    2286.33\n",
       "                ],\n",
       "                [\n",
       "                    2255.77,\n",
       "                    2270.28,\n",
       "                    2253.31,\n",
       "                    2276.22\n",
       "                ]\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"kline\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"kline\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2017/7/1\",\n",
       "                \"2017/7/2\",\n",
       "                \"2017/7/3\",\n",
       "                \"2017/7/4\",\n",
       "                \"2017/7/5\",\n",
       "                \"2017/7/6\",\n",
       "                \"2017/7/7\",\n",
       "                \"2017/7/8\",\n",
       "                \"2017/7/9\",\n",
       "                \"2017/7/10\",\n",
       "                \"2017/7/11\",\n",
       "                \"2017/7/12\",\n",
       "                \"2017/7/13\",\n",
       "                \"2017/7/14\",\n",
       "                \"2017/7/15\",\n",
       "                \"2017/7/16\",\n",
       "                \"2017/7/17\",\n",
       "                \"2017/7/18\",\n",
       "                \"2017/7/19\",\n",
       "                \"2017/7/20\",\n",
       "                \"2017/7/21\",\n",
       "                \"2017/7/22\",\n",
       "                \"2017/7/23\",\n",
       "                \"2017/7/24\",\n",
       "                \"2017/7/25\",\n",
       "                \"2017/7/26\",\n",
       "                \"2017/7/27\",\n",
       "                \"2017/7/28\",\n",
       "                \"2017/7/29\",\n",
       "                \"2017/7/30\",\n",
       "                \"2017/7/31\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"splitArea\": {\n",
       "                \"show\": true,\n",
       "                \"areaStyle\": {\n",
       "                    \"opacity\": 1\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Kline-DataZoom-slider-Position\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"realtime\": true,\n",
       "            \"start\": 20,\n",
       "            \"end\": 80,\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"zoomLock\": false,\n",
       "            \"bottom\": \"-2%\",\n",
       "            \"filterMode\": \"filter\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_89f2c39f52ba433799a8317870005c18.setOption(option_89f2c39f52ba433799a8317870005c18);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f21c0222128>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "kdzsp = (\n",
    "    Kline()\n",
    "    .add_xaxis([\"2017/7/{}\".format(i + 1) for i in range(31)])\n",
    "    .add_yaxis(\"kline\", data)\n",
    "    .set_global_opts(\n",
    "        xaxis_opts=opts.AxisOpts(is_scale=True),\n",
    "        yaxis_opts=opts.AxisOpts(\n",
    "            is_scale=True,\n",
    "            splitarea_opts=opts.SplitAreaOpts(\n",
    "                is_show=True, areastyle_opts=opts.AreaStyleOpts(opacity=1)\n",
    "            ),\n",
    "        ),\n",
    "        datazoom_opts=[opts.DataZoomOpts(pos_bottom=\"-2%\")],\n",
    "        title_opts=opts.TitleOpts(title=\"Kline-DataZoom-slider-Position\"),\n",
    "    )\n",
    "    #.render(\"kline_datazoom_slider_position.html\")\n",
    ")\n",
    "kdzsp.load_javascript()\n",
    "kdzsp.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## k线自定义样式"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"9277693174c14bbb9033d278322bc7cb\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_9277693174c14bbb9033d278322bc7cb = echarts.init(\n",
       "                    document.getElementById('9277693174c14bbb9033d278322bc7cb'), 'white', {renderer: 'canvas'});\n",
       "                var option_9277693174c14bbb9033d278322bc7cb = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"candlestick\",\n",
       "            \"name\": \"kline\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    2320.26,\n",
       "                    2320.26,\n",
       "                    2287.3,\n",
       "                    2362.94\n",
       "                ],\n",
       "                [\n",
       "                    2300,\n",
       "                    2291.3,\n",
       "                    2288.26,\n",
       "                    2308.38\n",
       "                ],\n",
       "                [\n",
       "                    2295.35,\n",
       "                    2346.5,\n",
       "                    2295.35,\n",
       "                    2345.92\n",
       "                ],\n",
       "                [\n",
       "                    2347.22,\n",
       "                    2358.98,\n",
       "                    2337.35,\n",
       "                    2363.8\n",
       "                ],\n",
       "                [\n",
       "                    2360.75,\n",
       "                    2382.48,\n",
       "                    2347.89,\n",
       "                    2383.76\n",
       "                ],\n",
       "                [\n",
       "                    2383.43,\n",
       "                    2385.42,\n",
       "                    2371.23,\n",
       "                    2391.82\n",
       "                ],\n",
       "                [\n",
       "                    2377.41,\n",
       "                    2419.02,\n",
       "                    2369.57,\n",
       "                    2421.15\n",
       "                ],\n",
       "                [\n",
       "                    2425.92,\n",
       "                    2428.15,\n",
       "                    2417.58,\n",
       "                    2440.38\n",
       "                ],\n",
       "                [\n",
       "                    2411,\n",
       "                    2433.13,\n",
       "                    2403.3,\n",
       "                    2437.42\n",
       "                ],\n",
       "                [\n",
       "                    2432.68,\n",
       "                    2334.48,\n",
       "                    2427.7,\n",
       "                    2441.73\n",
       "                ],\n",
       "                [\n",
       "                    2430.69,\n",
       "                    2418.53,\n",
       "                    2394.22,\n",
       "                    2433.89\n",
       "                ],\n",
       "                [\n",
       "                    2416.62,\n",
       "                    2432.4,\n",
       "                    2414.4,\n",
       "                    2443.03\n",
       "                ],\n",
       "                [\n",
       "                    2441.91,\n",
       "                    2421.56,\n",
       "                    2418.43,\n",
       "                    2444.8\n",
       "                ],\n",
       "                [\n",
       "                    2420.26,\n",
       "                    2382.91,\n",
       "                    2373.53,\n",
       "                    2427.07\n",
       "                ],\n",
       "                [\n",
       "                    2383.49,\n",
       "                    2397.18,\n",
       "                    2370.61,\n",
       "                    2397.94\n",
       "                ],\n",
       "                [\n",
       "                    2378.82,\n",
       "                    2325.95,\n",
       "                    2309.17,\n",
       "                    2378.82\n",
       "                ],\n",
       "                [\n",
       "                    2322.94,\n",
       "                    2314.16,\n",
       "                    2308.76,\n",
       "                    2330.88\n",
       "                ],\n",
       "                [\n",
       "                    2320.62,\n",
       "                    2325.82,\n",
       "                    2315.01,\n",
       "                    2338.78\n",
       "                ],\n",
       "                [\n",
       "                    2313.74,\n",
       "                    2293.34,\n",
       "                    2289.89,\n",
       "                    2340.71\n",
       "                ],\n",
       "                [\n",
       "                    2297.77,\n",
       "                    2313.22,\n",
       "                    2292.03,\n",
       "                    2324.63\n",
       "                ],\n",
       "                [\n",
       "                    2322.32,\n",
       "                    2365.59,\n",
       "                    2308.92,\n",
       "                    2366.16\n",
       "                ],\n",
       "                [\n",
       "                    2364.54,\n",
       "                    2359.51,\n",
       "                    2330.86,\n",
       "                    2369.65\n",
       "                ],\n",
       "                [\n",
       "                    2332.08,\n",
       "                    2273.4,\n",
       "                    2259.25,\n",
       "                    2333.54\n",
       "                ],\n",
       "                [\n",
       "                    2274.81,\n",
       "                    2326.31,\n",
       "                    2270.1,\n",
       "                    2328.14\n",
       "                ],\n",
       "                [\n",
       "                    2333.61,\n",
       "                    2347.18,\n",
       "                    2321.6,\n",
       "                    2351.44\n",
       "                ],\n",
       "                [\n",
       "                    2340.44,\n",
       "                    2324.29,\n",
       "                    2304.27,\n",
       "                    2352.02\n",
       "                ],\n",
       "                [\n",
       "                    2326.42,\n",
       "                    2318.61,\n",
       "                    2314.59,\n",
       "                    2333.67\n",
       "                ],\n",
       "                [\n",
       "                    2314.68,\n",
       "                    2310.59,\n",
       "                    2296.58,\n",
       "                    2320.96\n",
       "                ],\n",
       "                [\n",
       "                    2309.16,\n",
       "                    2286.6,\n",
       "                    2264.83,\n",
       "                    2333.29\n",
       "                ],\n",
       "                [\n",
       "                    2282.17,\n",
       "                    2263.97,\n",
       "                    2253.25,\n",
       "                    2286.33\n",
       "                ],\n",
       "                [\n",
       "                    2255.77,\n",
       "                    2270.28,\n",
       "                    2253.31,\n",
       "                    2276.22\n",
       "                ]\n",
       "            ],\n",
       "            \"markLine\": {\n",
       "                \"silent\": false,\n",
       "                \"precision\": 2,\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"top\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"max\",\n",
       "                        \"valueDim\": \"close\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"itemStyle\": {\n",
       "                \"color\": \"#ec0000\",\n",
       "                \"color0\": \"#00da3c\",\n",
       "                \"borderColor\": \"#8A0000\",\n",
       "                \"borderColor0\": \"#008F28\"\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"kline\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"kline\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2020/7/1\",\n",
       "                \"2020/7/2\",\n",
       "                \"2020/7/3\",\n",
       "                \"2020/7/4\",\n",
       "                \"2020/7/5\",\n",
       "                \"2020/7/6\",\n",
       "                \"2020/7/7\",\n",
       "                \"2020/7/8\",\n",
       "                \"2020/7/9\",\n",
       "                \"2020/7/10\",\n",
       "                \"2020/7/11\",\n",
       "                \"2020/7/12\",\n",
       "                \"2020/7/13\",\n",
       "                \"2020/7/14\",\n",
       "                \"2020/7/15\",\n",
       "                \"2020/7/16\",\n",
       "                \"2020/7/17\",\n",
       "                \"2020/7/18\",\n",
       "                \"2020/7/19\",\n",
       "                \"2020/7/20\",\n",
       "                \"2020/7/21\",\n",
       "                \"2020/7/22\",\n",
       "                \"2020/7/23\",\n",
       "                \"2020/7/24\",\n",
       "                \"2020/7/25\",\n",
       "                \"2020/7/26\",\n",
       "                \"2020/7/27\",\n",
       "                \"2020/7/28\",\n",
       "                \"2020/7/29\",\n",
       "                \"2020/7/30\",\n",
       "                \"2020/7/31\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": true,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"splitArea\": {\n",
       "                \"show\": true,\n",
       "                \"areaStyle\": {\n",
       "                    \"opacity\": 1\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Kline-ItemStyle\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"realtime\": true,\n",
       "            \"start\": 20,\n",
       "            \"end\": 80,\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"zoomLock\": false,\n",
       "            \"filterMode\": \"filter\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_9277693174c14bbb9033d278322bc7cb.setOption(option_9277693174c14bbb9033d278322bc7cb);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f21c0224358>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "kis = (\n",
    "    Kline()\n",
    "    .add_xaxis([\"2020/7/{}\".format(i + 1) for i in range(31)])\n",
    "    .add_yaxis(\n",
    "        \"kline\",\n",
    "        data,\n",
    "        itemstyle_opts=opts.ItemStyleOpts(\n",
    "            color=\"#ec0000\",\n",
    "            color0=\"#00da3c\",\n",
    "            border_color=\"#8A0000\",\n",
    "            border_color0=\"#008F28\",\n",
    "        ),\n",
    "        markline_opts=opts.MarkLineOpts(\n",
    "            data=[opts.MarkLineItem(type_=\"max\", value_dim=\"close\")]#标记最大值线\n",
    "        ),\n",
    "    )\n",
    "    .set_global_opts(\n",
    "        xaxis_opts=opts.AxisOpts(is_scale=True),\n",
    "        yaxis_opts=opts.AxisOpts(\n",
    "            is_scale=True,\n",
    "            splitarea_opts=opts.SplitAreaOpts(#显示分割区域\n",
    "                is_show=True, areastyle_opts=opts.AreaStyleOpts(opacity=1)\n",
    "            ),\n",
    "        ),\n",
    "        datazoom_opts=[opts.DataZoomOpts()],\n",
    "        title_opts=opts.TitleOpts(title=\"Kline-ItemStyle\"),\n",
    "    )\n",
    "    #.render(\"kline_itemstyle.html\")\n",
    ")\n",
    "kis.load_javascript()\n",
    "kis.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 多网格K线绘制"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    }
   ],
   "source": [
    "import json\n",
    "from pyecharts.charts import Line, Bar, Grid\n",
    "def get_data():\n",
    "#     response = requests.get(\n",
    "#         url=\"https://echarts.baidu.com/examples/data/asset/data/stock-DJI.json\"\n",
    "#     )\n",
    "#     json_response = response.json()\n",
    "\n",
    "#     # 解析数据,我这里是直接从网上下下来了,没有用上方原始代码\n",
    "    with open('stock-DJI.json','r',encoding='utf8')as fp:\n",
    "        json_response = json.load(fp)\n",
    "    return split_data(data=json_response)\n",
    "\n",
    "\n",
    "def split_data(data):\n",
    "    category_data = []\n",
    "    values = []\n",
    "    volumes = []\n",
    "\n",
    "    for i in range(len(data)):\n",
    "        category_data.append(data[i][0])\n",
    "        values.append(data[i])\n",
    "        volumes.append([i, data[i][4], 1 if data[i][1] > data[i][2] else -1])\n",
    "    return {\"categoryData\": category_data, \"values\": values, \"volumes\": volumes}\n",
    "\n",
    "\n",
    "def calculate_ma(day_count: int, data):\n",
    "    result: List[Union[float, str]] = []\n",
    "    for i in range(len(data[\"values\"])):\n",
    "        if i < day_count:\n",
    "            result.append(\"-\")\n",
    "            continue\n",
    "        sum_total = 0.0\n",
    "        for j in range(day_count):\n",
    "            sum_total += float(data[\"values\"][i - j][1])\n",
    "        result.append(abs(float(\"%.3f\" % (sum_total / day_count))))\n",
    "    return result\n",
    "\n",
    "\n",
    "def main():\n",
    "    kline_data = [data[1:-1] for data in chart_data[\"values\"]]\n",
    "    kline = (\n",
    "        Kline()\n",
    "        .add_xaxis(xaxis_data=chart_data[\"categoryData\"])\n",
    "        .add_yaxis(\n",
    "            series_name=\"Dow-Jones index\",\n",
    "            y_axis=kline_data,\n",
    "            itemstyle_opts=opts.ItemStyleOpts(color=\"#ec0000\", color0=\"#00da3c\"),\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            legend_opts=opts.LegendOpts(\n",
    "                is_show=False, pos_bottom=10, pos_left=\"center\"\n",
    "            ),\n",
    "            datazoom_opts=[\n",
    "                opts.DataZoomOpts(\n",
    "                    is_show=False,\n",
    "                    type_=\"inside\",\n",
    "                    xaxis_index=[0, 1],\n",
    "                    range_start=98,\n",
    "                    range_end=100,\n",
    "                ),\n",
    "                opts.DataZoomOpts(\n",
    "                    is_show=True,\n",
    "                    xaxis_index=[0, 1],\n",
    "                    type_=\"slider\",\n",
    "                    pos_top=\"85%\",\n",
    "                    range_start=98,\n",
    "                    range_end=100,\n",
    "                ),\n",
    "            ],\n",
    "            yaxis_opts=opts.AxisOpts(\n",
    "                is_scale=True,\n",
    "                splitarea_opts=opts.SplitAreaOpts(\n",
    "                    is_show=True, areastyle_opts=opts.AreaStyleOpts(opacity=1)\n",
    "                ),\n",
    "            ),\n",
    "            tooltip_opts=opts.TooltipOpts(\n",
    "                trigger=\"axis\",\n",
    "                axis_pointer_type=\"cross\",\n",
    "                background_color=\"rgba(245, 245, 245, 0.8)\",\n",
    "                border_width=1,\n",
    "                border_color=\"#ccc\",\n",
    "                textstyle_opts=opts.TextStyleOpts(color=\"#000\"),\n",
    "            ),\n",
    "            visualmap_opts=opts.VisualMapOpts(\n",
    "                is_show=False,\n",
    "                dimension=2,\n",
    "                series_index=5,\n",
    "                is_piecewise=True,\n",
    "                pieces=[\n",
    "                    {\"value\": 1, \"color\": \"#00da3c\"},\n",
    "                    {\"value\": -1, \"color\": \"#ec0000\"},\n",
    "                ],\n",
    "            ),\n",
    "            axispointer_opts=opts.AxisPointerOpts(\n",
    "                is_show=True,\n",
    "                link=[{\"xAxisIndex\": \"all\"}],\n",
    "                label=opts.LabelOpts(background_color=\"#777\"),\n",
    "            ),\n",
    "            brush_opts=opts.BrushOpts(\n",
    "                x_axis_index=\"all\",\n",
    "                brush_link=\"all\",\n",
    "                out_of_brush={\"colorAlpha\": 0.1},\n",
    "                brush_type=\"lineX\",\n",
    "            ),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    line = (\n",
    "        Line()\n",
    "        .add_xaxis(xaxis_data=chart_data[\"categoryData\"])\n",
    "        .add_yaxis(\n",
    "            series_name=\"MA5\",\n",
    "            y_axis=calculate_ma(day_count=5, data=chart_data),\n",
    "            is_smooth=True,\n",
    "            is_hover_animation=False,\n",
    "            linestyle_opts=opts.LineStyleOpts(width=3, opacity=0.5),\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            series_name=\"MA10\",\n",
    "            y_axis=calculate_ma(day_count=10, data=chart_data),\n",
    "            is_smooth=True,\n",
    "            is_hover_animation=False,\n",
    "            linestyle_opts=opts.LineStyleOpts(width=3, opacity=0.5),\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            series_name=\"MA20\",\n",
    "            y_axis=calculate_ma(day_count=20, data=chart_data),\n",
    "            is_smooth=True,\n",
    "            is_hover_animation=False,\n",
    "            linestyle_opts=opts.LineStyleOpts(width=3, opacity=0.5),\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            series_name=\"MA30\",\n",
    "            y_axis=calculate_ma(day_count=30, data=chart_data),\n",
    "            is_smooth=True,\n",
    "            is_hover_animation=False,\n",
    "            linestyle_opts=opts.LineStyleOpts(width=3, opacity=0.5),\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .set_global_opts(xaxis_opts=opts.AxisOpts(type_=\"category\"))\n",
    "    )\n",
    "\n",
    "    bar = (\n",
    "        Bar()\n",
    "        .add_xaxis(xaxis_data=chart_data[\"categoryData\"])\n",
    "        .add_yaxis(\n",
    "            \"Volume\",\n",
    "            chart_data[\"volumes\"],\n",
    "            xaxis_index=1,\n",
    "            yaxis_index=1,\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            xaxis_opts=opts.AxisOpts(\n",
    "                type_=\"category\",\n",
    "                is_scale=True,\n",
    "                grid_index=1,\n",
    "                boundary_gap=False,\n",
    "                axisline_opts=opts.AxisLineOpts(is_on_zero=False),\n",
    "                axistick_opts=opts.AxisTickOpts(is_show=False),\n",
    "                splitline_opts=opts.SplitLineOpts(is_show=False),\n",
    "                axislabel_opts=opts.LabelOpts(is_show=False),\n",
    "                split_number=20,\n",
    "                min_=\"dataMin\",\n",
    "                max_=\"dataMax\",\n",
    "            ),\n",
    "            yaxis_opts=opts.AxisOpts(\n",
    "                grid_index=1,\n",
    "                is_scale=True,\n",
    "                split_number=2,\n",
    "                axislabel_opts=opts.LabelOpts(is_show=False),\n",
    "                axisline_opts=opts.AxisLineOpts(is_show=False),\n",
    "                axistick_opts=opts.AxisTickOpts(is_show=False),\n",
    "                splitline_opts=opts.SplitLineOpts(is_show=False),\n",
    "            ),\n",
    "            legend_opts=opts.LegendOpts(is_show=False),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    # Kline And Line\n",
    "    overlap_kline_line = kline.overlap(line)\n",
    "\n",
    "    # Grid Overlap + Bar\n",
    "    grid_chart = Grid(\n",
    "        init_opts=opts.InitOpts(\n",
    "            width=\"1000px\",\n",
    "            height=\"800px\",\n",
    "            animation_opts=opts.AnimationOpts(animation=False),\n",
    "        )\n",
    "    )\n",
    "    grid_chart.add(\n",
    "        overlap_kline_line,\n",
    "        grid_opts=opts.GridOpts(pos_left=\"10%\", pos_right=\"8%\", height=\"50%\"),\n",
    "    )\n",
    "    grid_chart.add(\n",
    "        bar,\n",
    "        grid_opts=opts.GridOpts(\n",
    "            pos_left=\"10%\", pos_right=\"8%\", pos_top=\"63%\", height=\"16%\"\n",
    "        ),\n",
    "    )\n",
    "\n",
    "    #grid_chart.render(\"professional_kline_brush.html\")\n",
    "    return grid_chart\n",
    "    grid_chart.load_javascript()\n",
    "    grid_chart.render_notebook()\n",
    "\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    chart_data = get_data()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"f3b5eee5c058485189cfe49bdeb998e8\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_f3b5eee5c058485189cfe49bdeb998e8 = echarts.init(\n",
       "                    document.getElementById('f3b5eee5c058485189cfe49bdeb998e8'), 'white', {renderer: 'canvas'});\n",
       "                var option_f3b5eee5c058485189cfe49bdeb998e8 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                114,\n",
       "                55,\n",
       "                27,\n",
       "                101,\n",
       "                125,\n",
       "                27,\n",
       "                105\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                57,\n",
       "                134,\n",
       "                137,\n",
       "                129,\n",
       "                145,\n",
       "                60,\n",
       "                49\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u6700\\u9ad8\\u6c14\\u6e29\",\n",
       "            \"connectNulls\": false,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u5468\\u4e00\",\n",
       "                    11\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e8c\",\n",
       "                    11\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e09\",\n",
       "                    15\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u56db\",\n",
       "                    13\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e94\",\n",
       "                    12\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u516d\",\n",
       "                    13\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u65e5\",\n",
       "                    10\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"inside\",\n",
       "                    \"color\": \"#fff\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"name\": \"\\u6700\\u5927\\u503c\",\n",
       "                        \"type\": \"max\"\n",
       "                    },\n",
       "                    {\n",
       "                        \"name\": \"\\u6700\\u5c0f\\u503c\",\n",
       "                        \"type\": \"min\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"silent\": false,\n",
       "                \"precision\": 2,\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"top\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"name\": \"\\u5e73\\u5747\\u503c\",\n",
       "                        \"type\": \"average\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u6700\\u4f4e\\u6c14\\u6e29\",\n",
       "            \"connectNulls\": false,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u5468\\u4e00\",\n",
       "                    1\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e8c\",\n",
       "                    -2\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e09\",\n",
       "                    2\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u56db\",\n",
       "                    5\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e94\",\n",
       "                    3\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u516d\",\n",
       "                    2\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u65e5\",\n",
       "                    0\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"inside\",\n",
       "                    \"color\": \"#fff\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"name\": \"\\u5468\\u6700\\u4f4e\",\n",
       "                        \"x\": 1,\n",
       "                        \"y\": -1.5,\n",
       "                        \"value\": -2\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"silent\": false,\n",
       "                \"precision\": 2,\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"top\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"name\": \"\\u5e73\\u5747\\u503c\",\n",
       "                        \"type\": \"average\"\n",
       "                    },\n",
       "                    {\n",
       "                        \"xAxis\": \"90%\",\n",
       "                        \"yAxis\": \"max\",\n",
       "                        \"symbol\": \"none\"\n",
       "                    },\n",
       "                    {\n",
       "                        \"name\": \"\\u6700\\u9ad8\\u70b9\",\n",
       "                        \"type\": \"max\",\n",
       "                        \"symbol\": \"circle\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        },\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u6700\\u9ad8\\u6c14\\u6e29\",\n",
       "                \"\\u6700\\u4f4e\\u6c14\\u6e29\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u6700\\u9ad8\\u6c14\\u6e29\": true,\n",
       "                \"\\u6700\\u4f4e\\u6c14\\u6e29\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u6bdb\\u8863\",\n",
       "                \"\\u9886\\u5e26\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u98ce\\u8863\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"category\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"boundaryGap\": false,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u5468\\u4e00\",\n",
       "                \"\\u5468\\u4e8c\",\n",
       "                \"\\u5468\\u4e09\",\n",
       "                \"\\u5468\\u56db\",\n",
       "                \"\\u5468\\u4e94\",\n",
       "                \"\\u5468\\u516d\",\n",
       "                \"\\u5468\\u65e5\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u8fd0\\u7ef4\\u4e4b\\u8def\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"3%\",\n",
       "            \"right\": \"1%\",\n",
       "            \"height\": \"20%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"3%\",\n",
       "            \"top\": \"40%\",\n",
       "            \"right\": \"1%\",\n",
       "            \"height\": \"35%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_f3b5eee5c058485189cfe49bdeb998e8.setOption(option_f3b5eee5c058485189cfe49bdeb998e8);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f21aa9ac668>"
      ]
     },
     "execution_count": 24,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Line, Bar, Grid\n",
    "bar = (\n",
    "    Bar()\n",
    "    .add_xaxis([\"衬衫\", \"毛衣\", \"领带\", \"裤子\", \"风衣\", \"高跟鞋\", \"袜子\"])\n",
    "    .add_yaxis(\"商家A\", [114, 55, 27, 101, 125, 27, 105])\n",
    "    .add_yaxis(\"商家B\", [57, 134, 137, 129, 145, 60, 49])\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"运维之路\"),)\n",
    ")\n",
    "week_name_list = [\"周一\", \"周二\", \"周三\", \"周四\", \"周五\", \"周六\", \"周日\"]\n",
    "high_temperature = [11, 11, 15, 13, 12, 13, 10]\n",
    "low_temperature = [1, -2, 2, 5, 3, 2, 0]\n",
    "line2 = (\n",
    "    Line(init_opts=opts.InitOpts(width=\"1600px\", height=\"800px\"))\n",
    "    .add_xaxis(xaxis_data=week_name_list)\n",
    "    .add_yaxis(\n",
    "        series_name=\"最高气温\",\n",
    "        y_axis=high_temperature,\n",
    "        markpoint_opts=opts.MarkPointOpts(\n",
    "            data=[\n",
    "                opts.MarkPointItem(type_=\"max\", name=\"最大值\"),\n",
    "                opts.MarkPointItem(type_=\"min\", name=\"最小值\"),\n",
    "            ]\n",
    "        ),\n",
    "        markline_opts=opts.MarkLineOpts(\n",
    "            data=[opts.MarkLineItem(type_=\"average\", name=\"平均值\")]\n",
    "        ),\n",
    "    )\n",
    "    .add_yaxis(\n",
    "        series_name=\"最低气温\",\n",
    "        y_axis=low_temperature,\n",
    "        markpoint_opts=opts.MarkPointOpts(\n",
    "            data=[opts.MarkPointItem(value=-2, name=\"周最低\", x=1, y=-1.5)]\n",
    "        ),\n",
    "        markline_opts=opts.MarkLineOpts(\n",
    "            data=[\n",
    "                opts.MarkLineItem(type_=\"average\", name=\"平均值\"),\n",
    "                opts.MarkLineItem(symbol=\"none\", x=\"90%\", y=\"max\"),\n",
    "                opts.MarkLineItem(symbol=\"circle\", type_=\"max\", name=\"最高点\"),\n",
    "            ]\n",
    "        ),\n",
    "    )\n",
    "    .set_global_opts(\n",
    "        #title_opts=opts.TitleOpts(title=\"气温变化\", subtitle=\"纯属虚构\"),\n",
    "        tooltip_opts=opts.TooltipOpts(trigger=\"axis\"),\n",
    "        toolbox_opts=opts.ToolboxOpts(is_show=True),\n",
    "        xaxis_opts=opts.AxisOpts(type_=\"category\", boundary_gap=False),\n",
    "        #legend_opts=opts.LegendOpts(pos_left=\"right\"),\n",
    "    )\n",
    "    #.render(\"temperature_change_line_chart.html\")\n",
    ")\n",
    "# 最后的 Grid\n",
    "#grid_chart = Grid(init_opts=opts.InitOpts(width=\"1400px\", height=\"800px\"))\n",
    "grid_chart = Grid()\n",
    "grid_chart.add(\n",
    "    bar,\n",
    "    grid_opts=opts.GridOpts(\n",
    "        pos_left=\"3%\", pos_right=\"1%\", height=\"20%\"\n",
    "    ),\n",
    ")\n",
    "# wr\n",
    "grid_chart.add(\n",
    "    line2,\n",
    "    grid_opts=opts.GridOpts(\n",
    "        pos_left=\"3%\", pos_right=\"1%\", pos_top=\"40%\", height=\"35%\"\n",
    "    ),\n",
    ")\n",
    "#grid_chart.render(\"professional_kline_chart.html\")\n",
    "grid_chart.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    }
   ],
   "source": [
    "from typing import List, Sequence, Union\n",
    "from pyecharts.commons.utils import JsCode\n",
    "\n",
    "echarts_data = [\n",
    "    [\"2015-10-16\", 18.4, 18.58, 18.33, 18.79, 67.00, 1, 0.04, 0.11, 0.09],\n",
    "    [\"2015-10-19\", 18.56, 18.25, 18.19, 18.56, 55.00, 0, -0.00, 0.08, 0.09],\n",
    "    [\"2015-10-20\", 18.3, 18.22, 18.05, 18.41, 37.00, 0, 0.01, 0.09, 0.09],\n",
    "    [\"2015-10-21\", 18.18, 18.69, 18.02, 18.98, 89.00, 0, 0.03, 0.10, 0.08],\n",
    "    [\"2015-10-22\", 18.42, 18.29, 18.22, 18.48, 43.00, 0, -0.06, 0.05, 0.08],\n",
    "    [\"2015-10-23\", 18.26, 18.19, 18.08, 18.36, 46.00, 0, -0.10, 0.03, 0.09],\n",
    "    [\"2015-10-26\", 18.33, 18.07, 17.98, 18.35, 65.00, 0, -0.15, 0.03, 0.10],\n",
    "    [\"2015-10-27\", 18.08, 18.04, 17.88, 18.13, 37.00, 0, -0.19, 0.03, 0.12],\n",
    "    [\"2015-10-28\", 17.96, 17.86, 17.82, 17.99, 35.00, 0, -0.24, 0.03, 0.15],\n",
    "    [\"2015-10-29\", 17.85, 17.81, 17.8, 17.93, 27.00, 0, -0.24, 0.06, 0.18],\n",
    "    [\"2015-10-30\", 17.79, 17.93, 17.78, 18.08, 43.00, 0, -0.22, 0.11, 0.22],\n",
    "    [\"2015-11-02\", 17.78, 17.83, 17.78, 18.04, 27.00, 0, -0.20, 0.15, 0.25],\n",
    "    [\"2015-11-03\", 17.84, 17.9, 17.84, 18.06, 34.00, 0, -0.12, 0.22, 0.28],\n",
    "    [\"2015-11-04\", 17.97, 18.36, 17.85, 18.39, 62.00, 0, -0.00, 0.30, 0.30],\n",
    "    [\"2015-11-05\", 18.3, 18.57, 18.18, 19.08, 177.00, 0, 0.07, 0.33, 0.30],\n",
    "    [\"2015-11-06\", 18.53, 18.68, 18.3, 18.71, 95.00, 0, 0.12, 0.35, 0.29],\n",
    "    [\"2015-11-09\", 18.75, 19.08, 18.75, 19.98, 202.00, 1, 0.16, 0.35, 0.27],\n",
    "    [\"2015-11-10\", 18.85, 18.64, 18.56, 18.99, 85.00, 0, 0.09, 0.29, 0.25],\n",
    "    [\"2015-11-11\", 18.64, 18.44, 18.31, 18.64, 50.00, 0, 0.06, 0.27, 0.23],\n",
    "    [\"2015-11-12\", 18.55, 18.27, 18.17, 18.57, 43.00, 0, 0.05, 0.25, 0.23],\n",
    "    [\"2015-11-13\", 18.13, 18.14, 18.09, 18.34, 35.00, 0, 0.05, 0.24, 0.22],\n",
    "    [\"2015-11-16\", 18.01, 18.1, 17.93, 18.17, 34.00, 0, 0.07, 0.25, 0.21],\n",
    "    [\"2015-11-17\", 18.2, 18.14, 18.08, 18.45, 58.00, 0, 0.11, 0.25, 0.20],\n",
    "    [\"2015-11-18\", 18.23, 18.16, 18.0, 18.45, 47.00, 0, 0.13, 0.25, 0.19],\n",
    "    [\"2015-11-19\", 18.08, 18.2, 18.05, 18.25, 32.00, 0, 0.15, 0.24, 0.17],\n",
    "    [\"2015-11-20\", 18.15, 18.15, 18.11, 18.29, 36.00, 0, 0.13, 0.21, 0.15],\n",
    "    [\"2015-11-23\", 18.16, 18.19, 18.12, 18.34, 47.00, 0, 0.11, 0.18, 0.13],\n",
    "    [\"2015-11-24\", 18.23, 17.88, 17.7, 18.23, 62.00, 0, 0.03, 0.13, 0.11],\n",
    "    [\"2015-11-25\", 17.85, 17.73, 17.56, 17.85, 66.00, 0, -0.03, 0.09, 0.11],\n",
    "    [\"2015-11-26\", 17.79, 17.53, 17.5, 17.92, 63.00, 0, -0.10, 0.06, 0.11],\n",
    "    [\"2015-11-27\", 17.51, 17.04, 16.9, 17.51, 67.00, 0, -0.16, 0.05, 0.13],\n",
    "    [\"2015-11-30\", 17.07, 17.2, 16.98, 17.32, 55.00, 0, -0.12, 0.09, 0.15],\n",
    "    [\"2015-12-01\", 17.28, 17.11, 16.91, 17.28, 39.00, 0, -0.09, 0.12, 0.16],\n",
    "    [\"2015-12-02\", 17.13, 17.91, 17.05, 17.99, 102.00, 0, -0.01, 0.17, 0.18],\n",
    "    [\"2015-12-03\", 17.8, 17.78, 17.61, 17.98, 71.00, 0, -0.09, 0.14, 0.18],\n",
    "    [\"2015-12-04\", 17.6, 17.25, 17.13, 17.69, 51.00, 0, -0.18, 0.10, 0.19],\n",
    "    [\"2015-12-07\", 17.2, 17.39, 17.15, 17.45, 43.00, 0, -0.19, 0.12, 0.22],\n",
    "    [\"2015-12-08\", 17.3, 17.42, 17.18, 17.62, 45.00, 0, -0.23, 0.13, 0.24],\n",
    "    [\"2015-12-09\", 17.33, 17.39, 17.32, 17.59, 44.00, 0, -0.29, 0.13, 0.28],\n",
    "    [\"2015-12-10\", 17.39, 17.26, 17.21, 17.65, 44.00, 0, -0.37, 0.13, 0.32],\n",
    "    [\"2015-12-11\", 17.23, 16.92, 16.66, 17.26, 114.00, 1, -0.44, 0.15, 0.37],\n",
    "    [\"2015-12-14\", 16.75, 17.06, 16.5, 17.09, 94.00, 0, -0.44, 0.21, 0.44],\n",
    "    [\"2015-12-15\", 17.03, 17.03, 16.9, 17.06, 46.00, 0, -0.44, 0.28, 0.50],\n",
    "    [\"2015-12-16\", 17.08, 16.96, 16.87, 17.09, 30.00, 0, -0.40, 0.36, 0.56],\n",
    "    [\"2015-12-17\", 17.0, 17.1, 16.95, 17.12, 50.00, 0, -0.30, 0.47, 0.62],\n",
    "    [\"2015-12-18\", 17.09, 17.52, 17.04, 18.06, 156.00, 0, -0.14, 0.59, 0.66],\n",
    "    [\"2015-12-21\", 17.43, 18.23, 17.35, 18.45, 152.00, 1, 0.02, 0.69, 0.68],\n",
    "    [\"2015-12-22\", 18.14, 18.27, 18.06, 18.32, 94.00, 0, 0.08, 0.72, 0.68],\n",
    "    [\"2015-12-23\", 18.28, 18.19, 18.17, 18.71, 108.00, 0, 0.13, 0.73, 0.67],\n",
    "    [\"2015-12-24\", 18.18, 18.14, 18.01, 18.31, 37.00, 0, 0.19, 0.74, 0.65],\n",
    "    [\"2015-12-25\", 18.22, 18.33, 18.2, 18.36, 48.00, 0, 0.26, 0.75, 0.62],\n",
    "    [\"2015-12-28\", 18.35, 17.84, 17.8, 18.39, 48.00, 0, 0.27, 0.72, 0.59],\n",
    "    [\"2015-12-29\", 17.83, 17.94, 17.71, 17.97, 36.00, 0, 0.36, 0.73, 0.55],\n",
    "    [\"2015-12-30\", 17.9, 18.26, 17.55, 18.3, 71.00, 1, 0.43, 0.71, 0.50],\n",
    "    [\"2015-12-31\", 18.12, 17.99, 17.91, 18.33, 72.00, 0, 0.40, 0.63, 0.43],\n",
    "    [\"2016-01-04\", 17.91, 17.28, 17.16, 17.95, 37.00, 1, 0.34, 0.55, 0.38],\n",
    "    [\"2016-01-05\", 17.17, 17.23, 17.0, 17.55, 51.00, 0, 0.37, 0.51, 0.33],\n",
    "    [\"2016-01-06\", 17.2, 17.31, 17.06, 17.33, 31.00, 0, 0.37, 0.46, 0.28],\n",
    "    [\"2016-01-07\", 17.15, 16.67, 16.51, 17.15, 19.00, 0, 0.30, 0.37, 0.22],\n",
    "    [\"2016-01-08\", 16.8, 16.81, 16.61, 17.06, 60.00, 0, 0.29, 0.32, 0.18],\n",
    "    [\"2016-01-11\", 16.68, 16.04, 16.0, 16.68, 65.00, 0, 0.20, 0.24, 0.14],\n",
    "    [\"2016-01-12\", 16.03, 15.98, 15.88, 16.25, 46.00, 0, 0.20, 0.21, 0.11],\n",
    "    [\"2016-01-13\", 16.21, 15.87, 15.78, 16.21, 57.00, 0, 0.20, 0.18, 0.08],\n",
    "    [\"2016-01-14\", 15.55, 15.89, 15.52, 15.96, 42.00, 0, 0.20, 0.16, 0.05],\n",
    "    [\"2016-01-15\", 15.87, 15.48, 15.45, 15.92, 34.00, 1, 0.17, 0.11, 0.02],\n",
    "    [\"2016-01-18\", 15.39, 15.42, 15.36, 15.7, 26.00, 0, 0.21, 0.10, -0.00],\n",
    "    [\"2016-01-19\", 15.58, 15.71, 15.35, 15.77, 38.00, 0, 0.25, 0.09, -0.03],\n",
    "    [\"2016-01-20\", 15.56, 15.52, 15.24, 15.68, 38.00, 0, 0.23, 0.05, -0.07],\n",
    "    [\"2016-01-21\", 15.41, 15.3, 15.28, 15.68, 35.00, 0, 0.21, 0.00, -0.10],\n",
    "    [\"2016-01-22\", 15.48, 15.28, 15.13, 15.49, 30.00, 0, 0.21, -0.02, -0.13],\n",
    "    [\"2016-01-25\", 15.29, 15.48, 15.2, 15.49, 21.00, 0, 0.20, -0.06, -0.16],\n",
    "    [\"2016-01-26\", 15.33, 14.86, 14.78, 15.39, 30.00, 0, 0.12, -0.13, -0.19],\n",
    "    [\"2016-01-27\", 14.96, 15.0, 14.84, 15.22, 51.00, 0, 0.13, -0.14, -0.20],\n",
    "    [\"2016-01-28\", 14.96, 14.72, 14.62, 15.06, 25.00, 0, 0.10, -0.17, -0.22],\n",
    "    [\"2016-01-29\", 14.75, 14.99, 14.62, 15.08, 36.00, 0, 0.13, -0.17, -0.24],\n",
    "    [\"2016-02-01\", 14.98, 14.72, 14.48, 15.18, 27.00, 0, 0.10, -0.21, -0.26],\n",
    "    [\"2016-02-02\", 14.65, 14.85, 14.65, 14.95, 18.00, 0, 0.11, -0.21, -0.27],\n",
    "    [\"2016-02-03\", 14.72, 14.67, 14.55, 14.8, 23.00, 0, 0.10, -0.24, -0.29],\n",
    "    [\"2016-02-04\", 14.79, 14.88, 14.69, 14.93, 22.00, 0, 0.13, -0.24, -0.30],\n",
    "    [\"2016-02-05\", 14.9, 14.86, 14.78, 14.93, 16.00, 0, 0.12, -0.26, -0.32],\n",
    "    [\"2016-02-15\", 14.5, 14.66, 14.47, 14.82, 19.00, 0, 0.11, -0.28, -0.34],\n",
    "    [\"2016-02-16\", 14.77, 14.94, 14.72, 15.05, 26.00, 0, 0.14, -0.28, -0.35],\n",
    "    [\"2016-02-17\", 14.95, 15.03, 14.88, 15.07, 38.00, 0, 0.12, -0.31, -0.37],\n",
    "    [\"2016-02-18\", 14.95, 14.9, 14.87, 15.06, 28.00, 0, 0.07, -0.35, -0.39],\n",
    "    [\"2016-02-19\", 14.9, 14.75, 14.68, 14.94, 22.00, 0, 0.03, -0.38, -0.40],\n",
    "    [\"2016-02-22\", 14.88, 15.01, 14.79, 15.11, 38.00, 1, 0.01, -0.40, -0.40],\n",
    "    [\"2016-02-23\", 15.01, 14.83, 14.72, 15.01, 24.00, 0, -0.09, -0.45, -0.40],\n",
    "    [\"2016-02-24\", 14.75, 14.81, 14.67, 14.87, 21.00, 0, -0.17, -0.48, -0.39],\n",
    "    [\"2016-02-25\", 14.81, 14.25, 14.21, 14.81, 51.00, 1, -0.27, -0.50, -0.37],\n",
    "    [\"2016-02-26\", 14.35, 14.45, 14.28, 14.57, 28.00, 0, -0.26, -0.46, -0.33],\n",
    "    [\"2016-02-29\", 14.43, 14.56, 14.04, 14.6, 48.00, 0, -0.25, -0.41, -0.29],\n",
    "    [\"2016-03-01\", 14.56, 14.65, 14.36, 14.78, 32.00, 0, -0.21, -0.36, -0.25],\n",
    "    [\"2016-03-02\", 14.79, 14.96, 14.72, 14.97, 60.00, 0, -0.13, -0.29, -0.22],\n",
    "    [\"2016-03-03\", 14.95, 15.15, 14.91, 15.19, 53.00, 1, -0.05, -0.23, -0.21],\n",
    "    [\"2016-03-04\", 15.14, 15.97, 15.02, 16.02, 164.00, 1, 0.06, -0.17, -0.20],\n",
    "    [\"2016-03-07\", 15.9, 15.78, 15.65, 16.0, 41.00, 0, 0.04, -0.19, -0.21],\n",
    "    [\"2016-03-08\", 15.78, 15.96, 15.21, 15.99, 45.00, 0, 0.05, -0.19, -0.21],\n",
    "    [\"2016-03-09\", 15.73, 16.05, 15.41, 16.08, 74.00, 0, 0.03, -0.20, -0.22],\n",
    "    [\"2016-03-10\", 15.82, 15.66, 15.65, 15.98, 19.00, 0, -0.02, -0.23, -0.22],\n",
    "    [\"2016-03-11\", 15.59, 15.76, 15.42, 15.78, 32.00, 0, 0.01, -0.22, -0.22],\n",
    "    [\"2016-03-14\", 15.78, 15.72, 15.65, 16.04, 31.00, 0, 0.03, -0.20, -0.22],\n",
    "    [\"2016-03-15\", 15.81, 15.86, 15.6, 15.99, 35.00, 0, 0.10, -0.18, -0.23],\n",
    "    [\"2016-03-16\", 15.88, 16.42, 15.79, 16.45, 123.00, 0, 0.17, -0.16, -0.24],\n",
    "    [\"2016-03-17\", 16.39, 16.23, 16.11, 16.4, 46.00, 0, 0.14, -0.20, -0.26],\n",
    "    [\"2016-03-18\", 16.39, 16.17, 16.04, 16.4, 59.00, 0, 0.13, -0.22, -0.28],\n",
    "    [\"2016-03-21\", 16.21, 16.22, 16.11, 16.44, 50.00, 0, 0.12, -0.24, -0.30],\n",
    "    [\"2016-03-22\", 16.27, 16.19, 16.16, 16.42, 33.00, 0, 0.10, -0.27, -0.32],\n",
    "    [\"2016-03-23\", 16.26, 16.18, 16.18, 16.29, 19.00, 0, 0.08, -0.30, -0.33],\n",
    "    [\"2016-03-24\", 16.18, 16.11, 16.01, 16.23, 23.00, 0, 0.04, -0.33, -0.35],\n",
    "    [\"2016-03-25\", 16.12, 16.13, 16.1, 16.2, 15.00, 0, 0.00, -0.35, -0.35],\n",
    "    [\"2016-03-28\", 16.15, 15.85, 15.81, 16.2, 22.00, 0, -0.06, -0.38, -0.35],\n",
    "    [\"2016-03-29\", 15.9, 15.79, 15.76, 16.05, 19.00, 0, -0.06, -0.37, -0.34],\n",
    "    [\"2016-03-30\", 15.79, 16.24, 15.78, 16.3, 29.00, 0, -0.03, -0.35, -0.33],\n",
    "    [\"2016-03-31\", 16.3, 16.09, 16.02, 16.35, 25.00, 0, -0.07, -0.37, -0.33],\n",
    "    [\"2016-04-01\", 16.18, 16.27, 15.98, 16.3, 38.00, 0, -0.08, -0.36, -0.32],\n",
    "    [\"2016-04-05\", 16.13, 16.34, 16.07, 16.37, 39.00, 0, -0.13, -0.37, -0.31],\n",
    "    [\"2016-04-06\", 16.21, 16.26, 16.19, 16.35, 30.00, 0, -0.20, -0.39, -0.29],\n",
    "    [\"2016-04-07\", 16.32, 16.1, 16.05, 16.35, 29.00, 1, -0.26, -0.39, -0.26],\n",
    "    [\"2016-04-08\", 16.0, 16.16, 15.98, 16.21, 22.00, 0, -0.28, -0.37, -0.23],\n",
    "    [\"2016-04-11\", 16.16, 16.31, 16.15, 16.57, 31.00, 0, -0.30, -0.33, -0.19],\n",
    "    [\"2016-04-12\", 16.41, 16.29, 16.12, 16.41, 17.00, 0, -0.31, -0.30, -0.14],\n",
    "    [\"2016-04-13\", 16.39, 16.48, 16.0, 16.68, 40.00, 0, -0.30, -0.25, -0.10],\n",
    "    [\"2016-04-14\", 16.5, 16.46, 16.37, 16.68, 22.00, 0, -0.27, -0.19, -0.06],\n",
    "    [\"2016-04-15\", 16.56, 16.93, 16.46, 17.04, 58.00, 0, -0.20, -0.12, -0.02],\n",
    "    [\"2016-04-18\", 16.76, 17.06, 16.72, 17.27, 50.00, 0, -0.16, -0.07, 0.01],\n",
    "    [\"2016-04-19\", 17.21, 17.11, 17.02, 17.23, 30.00, 0, -0.12, -0.02, 0.03],\n",
    "    [\"2016-04-20\", 17.11, 17.33, 16.8, 17.36, 78.00, 0, -0.04, 0.03, 0.05],\n",
    "    [\"2016-04-21\", 17.27, 17.69, 17.17, 17.93, 79.00, 0, 0.05, 0.08, 0.06],\n",
    "    [\"2016-04-22\", 17.6, 17.87, 17.56, 18.02, 55.00, 0, 0.09, 0.10, 0.05],\n",
    "    [\"2016-04-25\", 17.75, 17.9, 17.41, 17.96, 39.00, 1, 0.11, 0.09, 0.04],\n",
    "    [\"2016-04-26\", 17.81, 17.91, 17.6, 17.95, 39.00, 0, 0.12, 0.08, 0.02],\n",
    "    [\"2016-04-27\", 17.9, 17.88, 17.81, 17.95, 25.00, 0, 0.12, 0.06, 0.00],\n",
    "    [\"2016-04-28\", 17.93, 17.88, 17.67, 17.93, 28.00, 0, 0.11, 0.04, -0.01],\n",
    "    [\"2016-04-29\", 17.87, 17.75, 17.73, 17.92, 19.00, 0, 0.08, 0.01, -0.03],\n",
    "    [\"2016-05-03\", 17.79, 17.7, 17.56, 17.85, 35.00, 0, 0.05, -0.01, -0.04],\n",
    "    [\"2016-05-04\", 17.7, 17.65, 17.59, 17.71, 24.00, 0, 0.02, -0.04, -0.05],\n",
    "    [\"2016-05-05\", 17.65, 17.62, 17.46, 17.7, 20.00, 0, -0.03, -0.06, -0.05],\n",
    "    [\"2016-05-06\", 17.62, 17.32, 17.3, 17.65, 29.00, 0, -0.10, -0.09, -0.05],\n",
    "    [\"2016-05-09\", 17.33, 17.3, 17.21, 17.45, 23.00, 0, -0.13, -0.10, -0.03],\n",
    "    [\"2016-05-10\", 17.11, 17.04, 16.98, 17.41, 28.00, 0, -0.15, -0.09, -0.01],\n",
    "    [\"2016-05-11\", 17.06, 17.15, 17.06, 17.32, 20.00, 0, -0.12, -0.05, 0.01],\n",
    "    [\"2016-05-12\", 17.02, 17.46, 17.02, 17.58, 26.00, 0, -0.07, -0.01, 0.03],\n",
    "    [\"2016-05-13\", 17.41, 17.57, 17.34, 17.62, 23.00, 0, -0.06, 0.01, 0.03],\n",
    "    [\"2016-05-16\", 17.55, 17.5, 17.48, 17.64, 37.00, 0, -0.06, 0.01, 0.04],\n",
    "    [\"2016-05-17\", 17.49, 17.48, 17.39, 17.53, 13.00, 0, -0.03, 0.03, 0.05],\n",
    "    [\"2016-05-18\", 17.41, 17.82, 17.39, 17.87, 46.00, 0, 0.01, 0.06, 0.06],\n",
    "    [\"2016-05-19\", 17.74, 17.81, 17.67, 17.86, 17.00, 0, -0.01, 0.05, 0.05],\n",
    "    [\"2016-05-20\", 17.76, 17.88, 17.7, 17.93, 14.00, 0, -0.03, 0.04, 0.06],\n",
    "    [\"2016-05-23\", 17.88, 17.52, 17.48, 17.97, 16.00, 0, -0.09, 0.02, 0.06],\n",
    "    [\"2016-05-24\", 17.51, 17.33, 17.32, 17.51, 8.00, 0, -0.09, 0.03, 0.07],\n",
    "    [\"2016-05-25\", 17.59, 17.55, 17.44, 17.59, 10.00, 0, -0.03, 0.07, 0.08],\n",
    "    [\"2016-05-26\", 17.5, 17.69, 17.5, 17.8, 12.00, 0, 0.00, 0.09, 0.09],\n",
    "    [\"2016-05-27\", 17.77, 17.66, 17.62, 17.77, 7.00, 0, 0.03, 0.10, 0.09],\n",
    "    [\"2016-05-30\", 17.75, 17.84, 17.62, 17.87, 20.00, 0, 0.08, 0.12, 0.08],\n",
    "    [\"2016-05-31\", 17.88, 18.0, 17.81, 18.03, 41.00, 0, 0.10, 0.12, 0.07],\n",
    "    [\"2016-06-01\", 18.09, 17.83, 17.73, 18.09, 22.00, 0, 0.08, 0.10, 0.06],\n",
    "    [\"2016-06-02\", 17.82, 17.73, 17.66, 17.88, 10.00, 0, 0.07, 0.08, 0.05],\n",
    "    [\"2016-06-03\", 17.8, 17.78, 17.71, 17.83, 9.00, 0, 0.08, 0.08, 0.04],\n",
    "    [\"2016-06-06\", 17.73, 17.64, 17.56, 17.83, 12.00, 0, 0.07, 0.06, 0.03],\n",
    "    [\"2016-06-07\", 17.76, 17.8, 17.59, 17.87, 11.00, 0, 0.08, 0.06, 0.02],\n",
    "    [\"2016-06-08\", 17.75, 17.77, 17.65, 17.84, 9.00, 0, 0.04, 0.03, 0.01],\n",
    "    [\"2016-06-13\", 17.58, 17.32, 17.29, 17.79, 16.00, 0, -0.02, -0.01, 0.00],\n",
    "    [\"2016-06-14\", 17.33, 17.38, 17.29, 17.5, 10.00, 0, -0.01, 0.00, 0.00],\n",
    "    [\"2016-06-15\", 17.25, 17.39, 17.25, 17.46, 18.00, 0, 0.00, 0.01, 0.00],\n",
    "    [\"2016-06-16\", 17.26, 17.4, 17.26, 17.46, 22.00, 0, 0.01, 0.01, 0.00],\n",
    "    [\"2016-06-17\", 17.38, 17.5, 17.37, 17.67, 13.00, 0, 0.03, 0.02, 0.00],\n",
    "    [\"2016-06-20\", 17.62, 17.51, 17.42, 17.63, 15.00, 0, 0.03, 0.01, -0.00],\n",
    "    [\"2016-06-21\", 17.53, 17.54, 17.5, 17.7, 11.00, 0, 0.02, 0.00, -0.01],\n",
    "    [\"2016-06-22\", 17.5, 17.5, 17.46, 17.6, 10.00, 0, -0.01, -0.01, -0.01],\n",
    "    [\"2016-06-23\", 17.52, 17.26, 17.24, 17.53, 16.00, 0, -0.04, -0.03, -0.01],\n",
    "    [\"2016-06-24\", 17.26, 17.25, 17.18, 17.38, 60.00, 0, -0.03, -0.02, -0.00],\n",
    "    [\"2016-06-27\", 17.25, 17.28, 17.18, 17.33, 19.00, 0, -0.01, -0.00, 0.00],\n",
    "    [\"2016-06-28\", 17.25, 17.29, 17.21, 17.32, 13.00, 0, 0.02, 0.01, 0.00],\n",
    "    [\"2016-06-29\", 17.31, 17.45, 17.27, 17.49, 21.00, 0, 0.07, 0.04, 0.00],\n",
    "    [\"2016-06-30\", 17.47, 17.5, 17.39, 17.55, 17.00, 0, 0.11, 0.04, -0.01],\n",
    "    [\"2016-07-01\", 17.5, 17.63, 17.49, 17.66, 10.00, 0, 0.14, 0.05, -0.03],\n",
    "    [\"2016-07-04\", 17.63, 17.72, 17.63, 17.92, 17.00, 0, 0.16, 0.03, -0.05],\n",
    "    [\"2016-07-05\", 17.79, 17.56, 17.45, 17.79, 18.00, 0, 0.14, 0.00, -0.07],\n",
    "    [\"2016-07-06\", 17.53, 17.42, 17.31, 17.54, 20.00, 0, 0.14, -0.02, -0.09],\n",
    "    [\"2016-07-07\", 17.41, 17.51, 17.35, 17.52, 15.00, 0, 0.16, -0.03, -0.11],\n",
    "    [\"2016-07-08\", 17.5, 17.39, 17.35, 17.51, 15.00, 0, 0.16, -0.05, -0.13],\n",
    "    [\"2016-07-11\", 17.49, 17.48, 17.4, 17.55, 16.00, 0, 0.17, -0.07, -0.15],\n",
    "    [\"2016-07-12\", 17.48, 17.71, 17.46, 17.75, 25.00, 0, 0.16, -0.10, -0.18],\n",
    "    [\"2016-07-13\", 17.13, 17.05, 17.02, 17.39, 28.00, 0, 0.07, -0.17, -0.20],\n",
    "    [\"2016-07-14\", 17.07, 17.09, 17.0, 17.16, 12.00, 0, 0.08, -0.17, -0.21],\n",
    "    [\"2016-07-15\", 17.08, 17.14, 17.08, 17.17, 11.00, 0, 0.09, -0.18, -0.22],\n",
    "    [\"2016-07-18\", 17.15, 17.26, 17.13, 17.49, 24.00, 0, 0.10, -0.19, -0.23],\n",
    "    [\"2016-07-19\", 17.26, 17.12, 17.09, 17.33, 13.00, 0, 0.07, -0.21, -0.25],\n",
    "    [\"2016-07-20\", 17.1, 17.07, 17.02, 17.14, 11.00, 0, 0.06, -0.23, -0.26],\n",
    "    [\"2016-07-21\", 17.07, 17.24, 17.07, 17.27, 14.00, 0, 0.07, -0.23, -0.27],\n",
    "    [\"2016-07-22\", 17.25, 17.08, 17.03, 17.25, 10.00, 0, 0.04, -0.26, -0.28],\n",
    "    [\"2016-07-25\", 17.09, 17.12, 17.01, 17.18, 8.00, 0, 0.04, -0.26, -0.28],\n",
    "    [\"2016-07-26\", 17.05, 17.17, 17.05, 17.2, 11.00, 0, 0.04, -0.27, -0.29],\n",
    "    [\"2016-07-27\", 17.2, 17.37, 16.89, 17.38, 32.00, 0, 0.02, -0.28, -0.29],\n",
    "    [\"2016-07-28\", 17.19, 17.14, 17.09, 17.29, 19.00, 0, -0.04, -0.32, -0.30],\n",
    "    [\"2016-07-29\", 17.15, 17.16, 17.04, 17.23, 12.00, 0, -0.08, -0.33, -0.29],\n",
    "    [\"2016-08-01\", 17.15, 17.18, 17.1, 17.24, 19.00, 0, -0.13, -0.34, -0.28],\n",
    "    [\"2016-08-02\", 17.21, 17.15, 17.12, 17.25, 9.00, 0, -0.19, -0.36, -0.26],\n",
    "    [\"2016-08-03\", 17.08, 17.07, 17.01, 17.16, 9.00, 0, -0.25, -0.36, -0.24],\n",
    "    [\"2016-08-04\", 17.11, 17.06, 16.98, 17.12, 11.00, 1, -0.29, -0.35, -0.20],\n",
    "    [\"2016-08-05\", 17.06, 17.1, 17.05, 17.15, 16.00, 0, -0.33, -0.32, -0.16],\n",
    "    [\"2016-08-08\", 17.14, 17.13, 17.07, 17.15, 13.00, 0, -0.35, -0.29, -0.11],\n",
    "    [\"2016-08-09\", 17.13, 17.17, 17.1, 17.2, 25.00, 0, -0.35, -0.24, -0.06],\n",
    "    [\"2016-08-10\", 17.17, 17.28, 17.15, 17.29, 18.00, 0, -0.31, -0.17, -0.01],\n",
    "    [\"2016-08-11\", 17.3, 17.45, 17.26, 17.87, 31.00, 0, -0.24, -0.09, 0.03],\n",
    "    [\"2016-08-12\", 17.51, 17.99, 17.47, 18.0, 44.00, 0, -0.14, -0.00, 0.07],\n",
    "    [\"2016-08-15\", 18.1, 18.42, 18.02, 18.99, 81.00, 0, -0.09, 0.04, 0.09],\n",
    "    [\"2016-08-16\", 18.64, 18.31, 18.12, 18.87, 60.00, 0, -0.10, 0.05, 0.10],\n",
    "    [\"2016-08-17\", 18.43, 18.4, 18.31, 18.68, 21.00, 0, -0.08, 0.08, 0.11],\n",
    "    [\"2016-08-18\", 18.33, 18.23, 18.13, 18.65, 32.00, 0, -0.07, 0.09, 0.13],\n",
    "    [\"2016-08-19\", 18.34, 18.62, 18.31, 18.75, 39.00, 0, 0.00, 0.14, 0.14],\n",
    "    [\"2016-08-22\", 18.62, 18.69, 18.51, 18.8, 20.00, 0, 0.01, 0.14, 0.13],\n",
    "    [\"2016-08-23\", 18.61, 18.66, 18.52, 19.0, 28.00, 0, 0.01, 0.14, 0.13],\n",
    "    [\"2016-08-24\", 18.66, 18.62, 18.43, 18.7, 19.00, 0, 0.00, 0.13, 0.13],\n",
    "    [\"2016-08-25\", 18.57, 18.51, 18.19, 18.64, 19.00, 0, -0.00, 0.13, 0.13],\n",
    "    [\"2016-08-26\", 18.49, 18.55, 18.44, 18.6, 16.00, 0, 0.01, 0.13, 0.13],\n",
    "    [\"2016-08-29\", 18.46, 18.27, 18.03, 18.48, 20.00, 0, 0.01, 0.13, 0.13],\n",
    "    [\"2016-08-30\", 18.24, 18.44, 18.23, 18.52, 19.00, 0, 0.07, 0.17, 0.13],\n",
    "    [\"2016-08-31\", 18.36, 18.63, 18.36, 18.76, 15.00, 0, 0.13, 0.18, 0.12],\n",
    "    [\"2016-09-01\", 18.6, 18.62, 18.55, 18.78, 15.00, 0, 0.16, 0.18, 0.10],\n",
    "    [\"2016-09-02\", 18.52, 18.68, 18.48, 18.72, 17.00, 0, 0.19, 0.17, 0.08],\n",
    "    [\"2016-09-05\", 18.68, 18.75, 18.57, 18.82, 19.00, 0, 0.20, 0.15, 0.05],\n",
    "    [\"2016-09-06\", 18.75, 18.51, 18.43, 18.78, 17.00, 0, 0.18, 0.11, 0.02],\n",
    "    [\"2016-09-07\", 18.51, 18.56, 18.4, 18.62, 17.00, 0, 0.17, 0.08, -0.00],\n",
    "    [\"2016-09-08\", 18.58, 18.53, 18.48, 18.63, 8.00, 0, 0.13, 0.04, -0.03],\n",
    "    [\"2016-09-09\", 18.52, 18.33, 18.31, 18.57, 8.00, 0, 0.06, -0.02, -0.05],\n",
    "    [\"2016-09-12\", 18.16, 17.9, 17.81, 18.18, 28.00, 0, -0.02, -0.07, -0.06],\n",
    "    [\"2016-09-13\", 17.91, 17.91, 17.9, 18.08, 13.00, 0, -0.05, -0.08, -0.05],\n",
    "    [\"2016-09-14\", 17.99, 17.54, 17.48, 17.99, 22.00, 0, -0.09, -0.09, -0.05],\n",
    "    [\"2016-09-19\", 17.55, 17.81, 17.55, 17.88, 16.00, 0, -0.06, -0.06, -0.03],\n",
    "    [\"2016-09-20\", 17.8, 17.74, 17.67, 17.85, 10.00, 0, -0.06, -0.05, -0.02],\n",
    "    [\"2016-09-21\", 17.75, 17.88, 17.75, 17.95, 7.00, 0, -0.03, -0.03, -0.02],\n",
    "    [\"2016-09-22\", 17.99, 17.97, 17.88, 18.17, 12.00, 0, -0.02, -0.02, -0.01],\n",
    "    [\"2016-09-23\", 17.99, 17.98, 17.93, 18.09, 13.00, 0, -0.01, -0.01, -0.01],\n",
    "    [\"2016-09-26\", 17.91, 18.0, 17.85, 18.09, 14.00, 0, -0.00, -0.01, -0.01],\n",
    "    [\"2016-09-27\", 17.97, 18.07, 17.94, 18.1, 10.00, 0, 0.00, -0.01, -0.01],\n",
    "    [\"2016-09-28\", 18.06, 17.89, 17.83, 18.06, 10.00, 0, -0.00, -0.01, -0.01],\n",
    "    [\"2016-09-29\", 17.96, 18.0, 17.92, 18.07, 10.00, 0, 0.03, 0.01, -0.01],\n",
    "    [\"2016-09-30\", 17.96, 18.0, 17.95, 18.1, 8.00, 0, 0.06, 0.02, -0.01],\n",
    "    [\"2016-10-10\", 18.03, 18.3, 18.03, 18.38, 19.00, 0, 0.11, 0.04, -0.02],\n",
    "    [\"2016-10-11\", 18.33, 18.33, 18.26, 18.49, 12.00, 0, 0.10, 0.02, -0.04],\n",
    "    [\"2016-10-12\", 18.28, 18.15, 18.1, 18.31, 10.00, 0, 0.07, -0.02, -0.05],\n",
    "    [\"2016-10-13\", 18.15, 18.09, 18.05, 18.21, 10.00, 0, 0.06, -0.03, -0.06],\n",
    "    [\"2016-10-14\", 18.1, 18.1, 18.0, 18.15, 12.00, 0, 0.04, -0.05, -0.07],\n",
    "    [\"2016-10-17\", 18.07, 17.86, 17.83, 18.1, 12.00, 0, 0.01, -0.07, -0.08],\n",
    "    [\"2016-10-18\", 17.86, 17.93, 17.84, 17.99, 14.00, 0, 0.03, -0.07, -0.08],\n",
    "    [\"2016-10-19\", 17.93, 17.88, 17.83, 18.05, 11.00, 0, 0.03, -0.07, -0.08],\n",
    "    [\"2016-10-20\", 17.9, 17.89, 17.83, 17.98, 12.00, 0, 0.05, -0.06, -0.09],\n",
    "    [\"2016-10-21\", 17.91, 17.91, 17.82, 17.93, 12.00, 0, 0.07, -0.06, -0.09],\n",
    "    [\"2016-10-24\", 17.93, 18.31, 17.86, 18.42, 29.00, 0, 0.11, -0.05, -0.10],\n",
    "    [\"2016-10-25\", 18.31, 18.13, 18.09, 18.46, 19.00, 0, 0.06, -0.09, -0.12],\n",
    "    [\"2016-10-26\", 18.12, 17.97, 17.95, 18.15, 14.00, 0, 0.02, -0.12, -0.13],\n",
    "    [\"2016-10-27\", 18.06, 17.81, 17.77, 18.06, 21.00, 0, -0.01, -0.13, -0.13],\n",
    "    [\"2016-10-28\", 17.8, 17.9, 17.8, 18.05, 20.00, 0, -0.01, -0.13, -0.13],\n",
    "    [\"2016-10-31\", 17.87, 17.86, 17.72, 17.96, 12.00, 0, -0.02, -0.14, -0.13],\n",
    "    [\"2016-11-01\", 17.87, 17.98, 17.79, 17.99, 18.00, 0, -0.03, -0.14, -0.12],\n",
    "    [\"2016-11-02\", 17.86, 17.84, 17.76, 17.94, 30.00, 0, -0.06, -0.15, -0.12],\n",
    "    [\"2016-11-03\", 17.83, 17.93, 17.79, 17.97, 27.00, 0, -0.07, -0.14, -0.11],\n",
    "    [\"2016-11-04\", 17.9, 17.91, 17.87, 18.0, 26.00, 0, -0.09, -0.15, -0.10],\n",
    "    [\"2016-11-07\", 17.91, 17.89, 17.85, 17.93, 20.00, 0, -0.11, -0.14, -0.09],\n",
    "    [\"2016-11-08\", 17.92, 17.99, 17.89, 18.06, 26.00, 0, -0.12, -0.13, -0.07],\n",
    "    [\"2016-11-09\", 18.0, 17.89, 17.77, 18.08, 34.00, 0, -0.15, -0.13, -0.06],\n",
    "    [\"2016-11-10\", 17.95, 18.0, 17.94, 18.11, 27.00, 0, -0.15, -0.11, -0.03],\n",
    "    [\"2016-11-11\", 17.95, 18.02, 17.93, 18.08, 27.00, 0, -0.17, -0.10, -0.01],\n",
    "    [\"2016-11-14\", 18.0, 18.04, 17.95, 18.25, 35.00, 0, -0.18, -0.08, 0.01],\n",
    "    [\"2016-11-15\", 18.1, 18.18, 18.03, 18.24, 25.00, 0, -0.18, -0.06, 0.04],\n",
    "    [\"2016-11-16\", 18.23, 18.12, 18.05, 18.29, 23.00, 0, -0.21, -0.04, 0.06],\n",
    "    [\"2016-11-17\", 18.11, 18.12, 18.01, 18.14, 27.00, 0, -0.21, -0.01, 0.09],\n",
    "    [\"2016-11-18\", 18.12, 18.1, 18.03, 18.16, 18.00, 0, -0.19, 0.03, 0.12],\n",
    "    [\"2016-11-21\", 18.08, 18.34, 18.08, 18.68, 41.00, 0, -0.13, 0.08, 0.15],\n",
    "    [\"2016-11-22\", 18.37, 18.37, 18.28, 18.49, 52.00, 0, -0.09, 0.12, 0.17],\n",
    "    [\"2016-11-23\", 18.4, 18.84, 18.37, 18.9, 66.00, 0, -0.02, 0.17, 0.18],\n",
    "    [\"2016-11-24\", 18.77, 18.74, 18.61, 18.97, 26.00, 0, -0.02, 0.17, 0.18],\n",
    "    [\"2016-11-25\", 18.8, 18.99, 18.66, 19.02, 40.00, 0, -0.01, 0.18, 0.19],\n",
    "    [\"2016-11-28\", 19.1, 18.65, 18.52, 19.2, 85.00, 0, -0.06, 0.16, 0.19],\n",
    "    [\"2016-11-29\", 18.65, 18.75, 18.51, 18.76, 49.00, 0, -0.06, 0.17, 0.20],\n",
    "    [\"2016-11-30\", 18.76, 18.55, 18.47, 18.82, 39.00, 0, -0.08, 0.17, 0.21],\n",
    "    [\"2016-12-01\", 18.55, 18.49, 18.41, 18.64, 53.00, 0, -0.06, 0.19, 0.22],\n",
    "    [\"2016-12-02\", 18.53, 18.49, 18.24, 18.54, 48.00, 0, -0.02, 0.21, 0.23],\n",
    "    [\"2016-12-05\", 18.39, 18.66, 18.34, 18.67, 50.00, 0, 0.03, 0.25, 0.23],\n",
    "    [\"2016-12-06\", 18.66, 18.6, 18.57, 18.78, 31.00, 0, 0.08, 0.26, 0.23],\n",
    "    [\"2016-12-07\", 18.65, 18.62, 18.58, 18.71, 12.00, 0, 0.15, 0.29, 0.21],\n",
    "    [\"2016-12-08\", 18.67, 18.76, 18.62, 18.88, 26.00, 0, 0.25, 0.32, 0.19],\n",
    "    [\"2016-12-09\", 18.76, 19.2, 18.75, 19.34, 62.00, 0, 0.34, 0.33, 0.16],\n",
    "    [\"2016-12-12\", 19.16, 19.25, 18.9, 19.65, 79.00, 1, 0.34, 0.28, 0.11],\n",
    "    [\"2016-12-13\", 19.09, 18.88, 18.81, 19.2, 24.00, 0, 0.27, 0.20, 0.06],\n",
    "    [\"2016-12-14\", 18.8, 18.82, 18.8, 19.14, 32.00, 0, 0.23, 0.13, 0.02],\n",
    "    [\"2016-12-15\", 18.73, 18.24, 18.2, 18.73, 36.00, 0, 0.13, 0.05, -0.01],\n",
    "    [\"2016-12-16\", 18.24, 18.18, 18.12, 18.4, 24.00, 0, 0.10, 0.02, -0.03],\n",
    "    [\"2016-12-19\", 18.15, 18.01, 17.93, 18.18, 24.00, 0, 0.06, -0.02, -0.05],\n",
    "    [\"2016-12-20\", 17.99, 17.79, 17.7, 17.99, 29.00, 1, 0.02, -0.05, -0.05],\n",
    "    [\"2016-12-21\", 17.83, 17.81, 17.77, 17.98, 30.00, 0, 0.00, -0.05, -0.06],\n",
    "    [\"2016-12-22\", 17.85, 17.72, 17.65, 17.85, 21.00, 0, -0.03, -0.07, -0.06],\n",
    "    [\"2016-12-23\", 17.77, 17.6, 17.54, 17.77, 18.00, 0, -0.04, -0.08, -0.05],\n",
    "    [\"2016-12-26\", 17.56, 17.75, 17.39, 17.77, 16.00, 0, -0.04, -0.07, -0.05],\n",
    "    [\"2016-12-27\", 17.73, 17.71, 17.65, 17.82, 10.00, 0, -0.06, -0.07, -0.04],\n",
    "    [\"2016-12-28\", 17.72, 17.62, 17.49, 17.77, 26.00, 0, -0.09, -0.07, -0.03],\n",
    "    [\"2016-12-29\", 17.6, 17.49, 17.43, 17.62, 28.00, 0, -0.09, -0.06, -0.02],\n",
    "    [\"2016-12-30\", 17.53, 17.6, 17.47, 17.61, 22.00, 0, -0.05, -0.03, -0.01],\n",
    "    [\"2017-01-03\", 17.6, 17.92, 17.57, 17.98, 28.00, 1, 0.00, 0.00, 0.00],\n",
    "]\n",
    "\n",
    "\n",
    "def split_data(origin_data) -> dict:\n",
    "    datas = []\n",
    "    times = []\n",
    "    vols = []\n",
    "    macds = []\n",
    "    difs = []\n",
    "    deas = []\n",
    "\n",
    "    for i in range(len(origin_data)):\n",
    "        datas.append(origin_data[i][1:])\n",
    "        times.append(origin_data[i][0:1][0])\n",
    "        vols.append(origin_data[i][5])\n",
    "        macds.append(origin_data[i][7])\n",
    "        difs.append(origin_data[i][8])\n",
    "        deas.append(origin_data[i][9])\n",
    "    vols = [int(v) for v in vols]\n",
    "\n",
    "    return {\n",
    "        \"datas\": datas,\n",
    "        \"times\": times,\n",
    "        \"vols\": vols,\n",
    "        \"macds\": macds,\n",
    "        \"difs\": difs,\n",
    "        \"deas\": deas,\n",
    "    }\n",
    "\n",
    "\n",
    "def split_data_part() -> Sequence:\n",
    "    mark_line_data = []\n",
    "    idx = 0\n",
    "    tag = 0\n",
    "    vols = 0\n",
    "    for i in range(len(data[\"times\"])):\n",
    "        if data[\"datas\"][i][5] != 0 and tag == 0:\n",
    "            idx = i\n",
    "            vols = data[\"datas\"][i][4]\n",
    "            tag = 1\n",
    "        if tag == 1:\n",
    "            vols += data[\"datas\"][i][4]\n",
    "        if data[\"datas\"][i][5] != 0 or tag == 1:\n",
    "            mark_line_data.append(\n",
    "                [\n",
    "                    {\n",
    "                        \"xAxis\": idx,\n",
    "                        \"yAxis\": float(\"%.2f\" % data[\"datas\"][idx][3])\n",
    "                        if data[\"datas\"][idx][1] > data[\"datas\"][idx][0]\n",
    "                        else float(\"%.2f\" % data[\"datas\"][idx][2]),\n",
    "                        \"value\": vols,\n",
    "                    },\n",
    "                    {\n",
    "                        \"xAxis\": i,\n",
    "                        \"yAxis\": float(\"%.2f\" % data[\"datas\"][i][3])\n",
    "                        if data[\"datas\"][i][1] > data[\"datas\"][i][0]\n",
    "                        else float(\"%.2f\" % data[\"datas\"][i][2]),\n",
    "                    },\n",
    "                ]\n",
    "            )\n",
    "            idx = i\n",
    "            vols = data[\"datas\"][i][4]\n",
    "            tag = 2\n",
    "        if tag == 2:\n",
    "            vols += data[\"datas\"][i][4]\n",
    "        if data[\"datas\"][i][5] != 0 and tag == 2:\n",
    "            mark_line_data.append(\n",
    "                [\n",
    "                    {\n",
    "                        \"xAxis\": idx,\n",
    "                        \"yAxis\": float(\"%.2f\" % data[\"datas\"][idx][3])\n",
    "                        if data[\"datas\"][i][1] > data[\"datas\"][i][0]\n",
    "                        else float(\"%.2f\" % data[\"datas\"][i][2]),\n",
    "                        \"value\": str(float(\"%.2f\" % (vols / (i - idx + 1)))) + \" M\",\n",
    "                    },\n",
    "                    {\n",
    "                        \"xAxis\": i,\n",
    "                        \"yAxis\": float(\"%.2f\" % data[\"datas\"][i][3])\n",
    "                        if data[\"datas\"][i][1] > data[\"datas\"][i][0]\n",
    "                        else float(\"%.2f\" % data[\"datas\"][i][2]),\n",
    "                    },\n",
    "                ]\n",
    "            )\n",
    "            idx = i\n",
    "            vols = data[\"datas\"][i][4]\n",
    "    return mark_line_data\n",
    "\n",
    "\n",
    "def calculate_ma(day_count: int):\n",
    "    result: List[Union[float, str]] = []\n",
    "\n",
    "    for i in range(len(data[\"times\"])):\n",
    "        if i < day_count:\n",
    "            result.append(\"-\")\n",
    "            continue\n",
    "        sum_total = 0.0\n",
    "        for j in range(day_count):\n",
    "            sum_total += float(data[\"datas\"][i - j][1])\n",
    "        result.append(abs(float(\"%.2f\" % (sum_total / day_count))))\n",
    "    return result\n",
    "\n",
    "\n",
    "def draw_chart():\n",
    "    kline = (\n",
    "        Kline()\n",
    "        .add_xaxis(xaxis_data=data[\"times\"])\n",
    "        .add_yaxis(\n",
    "            \"\",\n",
    "            data[\"datas\"],\n",
    "            itemstyle_opts=opts.ItemStyleOpts(\n",
    "                color=\"#ef232a\",\n",
    "                color0=\"#14b143\",\n",
    "                border_color=\"#ef232a\",\n",
    "                border_color0=\"#14b143\",\n",
    "            ),\n",
    "            markpoint_opts=opts.MarkPointOpts(\n",
    "                data=[\n",
    "                    opts.MarkPointItem(type_=\"max\", name=\"最大值\"),\n",
    "                    opts.MarkPointItem(type_=\"min\", name=\"最小值\"),\n",
    "                ]\n",
    "            ),\n",
    "            markline_opts=opts.MarkLineOpts(\n",
    "                label_opts=opts.LabelOpts(\n",
    "                    position=\"middle\", color=\"blue\", font_size=15\n",
    "                ),\n",
    "                data=split_data_part(),\n",
    "                symbol=[\"circle\", \"none\"],\n",
    "            ),\n",
    "        )\n",
    "        .set_series_opts(\n",
    "            markarea_opts=opts.MarkAreaOpts(is_silent=True, data=split_data_part())\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            title_opts=opts.TitleOpts(title=\"K线周期图表\", pos_left=\"0\"),\n",
    "            xaxis_opts=opts.AxisOpts(\n",
    "                type_=\"category\",\n",
    "                is_scale=True,\n",
    "                boundary_gap=False,\n",
    "                axisline_opts=opts.AxisLineOpts(is_on_zero=False),\n",
    "                splitline_opts=opts.SplitLineOpts(is_show=False),\n",
    "                split_number=20,\n",
    "                min_=\"dataMin\",\n",
    "                max_=\"dataMax\",\n",
    "            ),\n",
    "            yaxis_opts=opts.AxisOpts(\n",
    "                is_scale=True, splitline_opts=opts.SplitLineOpts(is_show=True)\n",
    "            ),\n",
    "            tooltip_opts=opts.TooltipOpts(trigger=\"axis\", axis_pointer_type=\"line\"),\n",
    "            datazoom_opts=[\n",
    "                opts.DataZoomOpts(\n",
    "                    is_show=False, type_=\"inside\", xaxis_index=[0, 0], range_end=100\n",
    "                ),\n",
    "                opts.DataZoomOpts(\n",
    "                    is_show=True, xaxis_index=[0, 1], pos_top=\"97%\", range_end=100\n",
    "                ),\n",
    "                opts.DataZoomOpts(is_show=False, xaxis_index=[0, 2], range_end=100),\n",
    "            ],\n",
    "            # 三个图的 axis 连在一块\n",
    "            # axispointer_opts=opts.AxisPointerOpts(\n",
    "            #     is_show=True,\n",
    "            #     link=[{\"xAxisIndex\": \"all\"}],\n",
    "            #     label=opts.LabelOpts(background_color=\"#777\"),\n",
    "            # ),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    kline_line = (\n",
    "        Line()\n",
    "        .add_xaxis(xaxis_data=data[\"times\"])\n",
    "        .add_yaxis(\n",
    "            \"MA5\",\n",
    "            calculate_ma(day_count=5),\n",
    "            is_smooth=True,\n",
    "            linestyle_opts=opts.LineStyleOpts(opacity=0.5),\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            xaxis_opts=opts.AxisOpts(\n",
    "                type_=\"category\",\n",
    "                grid_index=1,\n",
    "                axislabel_opts=opts.LabelOpts(is_show=False),\n",
    "            ),\n",
    "            yaxis_opts=opts.AxisOpts(\n",
    "                grid_index=1,\n",
    "                split_number=3,\n",
    "                axisline_opts=opts.AxisLineOpts(is_on_zero=False),\n",
    "                axistick_opts=opts.AxisTickOpts(is_show=False),\n",
    "                splitline_opts=opts.SplitLineOpts(is_show=False),\n",
    "                axislabel_opts=opts.LabelOpts(is_show=True),\n",
    "            ),\n",
    "        )\n",
    "    )\n",
    "    # Overlap Kline + Line\n",
    "    overlap_kline_line = kline.overlap(kline_line)\n",
    "\n",
    "    # Bar-1\n",
    "    bar_1 = (\n",
    "        Bar()\n",
    "        .add_xaxis(xaxis_data=data[\"times\"])\n",
    "        .add_yaxis(\n",
    "            \"Volumn\",\n",
    "            data[\"vols\"],\n",
    "            xaxis_index=1,\n",
    "            yaxis_index=1,\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "            # 根据 echarts demo 的原版是这么写的\n",
    "            # itemstyle_opts=opts.ItemStyleOpts(\n",
    "            #     color=JsCode(\"\"\"\n",
    "            #     function(params) {\n",
    "            #         var colorList;\n",
    "            #         if (data.datas[params.dataIndex][1]>data.datas[params.dataIndex][0]) {\n",
    "            #           colorList = '#ef232a';\n",
    "            #         } else {\n",
    "            #           colorList = '#14b143';\n",
    "            #         }\n",
    "            #         return colorList;\n",
    "            #     }\n",
    "            #     \"\"\")\n",
    "            # )\n",
    "            # 改进后在 grid 中 add_js_funcs 后变成如下\n",
    "            itemstyle_opts=opts.ItemStyleOpts(\n",
    "                color=JsCode(\n",
    "                    \"\"\"\n",
    "                function(params) {\n",
    "                    var colorList;\n",
    "                    if (barData[params.dataIndex][1] > barData[params.dataIndex][0]) {\n",
    "                        colorList = '#ef232a';\n",
    "                    } else {\n",
    "                        colorList = '#14b143';\n",
    "                    }\n",
    "                    return colorList;\n",
    "                }\n",
    "                \"\"\"\n",
    "                )\n",
    "            ),\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            xaxis_opts=opts.AxisOpts(\n",
    "                type_=\"category\",\n",
    "                grid_index=1,\n",
    "                axislabel_opts=opts.LabelOpts(is_show=False),\n",
    "            ),\n",
    "            legend_opts=opts.LegendOpts(is_show=False),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    # Bar-2 (Overlap Bar + Line)\n",
    "    bar_2 = (\n",
    "        Bar()\n",
    "        .add_xaxis(xaxis_data=data[\"times\"])\n",
    "        .add_yaxis(\n",
    "            \"MACD\",\n",
    "            data[\"macds\"],\n",
    "            xaxis_index=2,\n",
    "            yaxis_index=2,\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "            itemstyle_opts=opts.ItemStyleOpts(\n",
    "                color=JsCode(\n",
    "                    \"\"\"\n",
    "                        function(params) {\n",
    "                            var colorList;\n",
    "                            if (params.data >= 0) {\n",
    "                              colorList = '#ef232a';\n",
    "                            } else {\n",
    "                              colorList = '#14b143';\n",
    "                            }\n",
    "                            return colorList;\n",
    "                        }\n",
    "                        \"\"\"\n",
    "                )\n",
    "            ),\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            xaxis_opts=opts.AxisOpts(\n",
    "                type_=\"category\",\n",
    "                grid_index=2,\n",
    "                axislabel_opts=opts.LabelOpts(is_show=False),\n",
    "            ),\n",
    "            yaxis_opts=opts.AxisOpts(\n",
    "                grid_index=2,\n",
    "                split_number=4,\n",
    "                axisline_opts=opts.AxisLineOpts(is_on_zero=False),\n",
    "                axistick_opts=opts.AxisTickOpts(is_show=False),\n",
    "                splitline_opts=opts.SplitLineOpts(is_show=False),\n",
    "                axislabel_opts=opts.LabelOpts(is_show=True),\n",
    "            ),\n",
    "            legend_opts=opts.LegendOpts(is_show=False),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    line_2 = (\n",
    "        Line()\n",
    "        .add_xaxis(xaxis_data=data[\"times\"])\n",
    "        .add_yaxis(\n",
    "            \"DIF\",\n",
    "            data[\"difs\"],\n",
    "            xaxis_index=2,\n",
    "            yaxis_index=2,\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            \"DIF\",\n",
    "            data[\"deas\"],\n",
    "            xaxis_index=2,\n",
    "            yaxis_index=2,\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .set_global_opts(legend_opts=opts.LegendOpts(is_show=False))\n",
    "    )\n",
    "    # 最下面的柱状图和折线图\n",
    "    overlap_bar_line = bar_2.overlap(line_2)\n",
    "\n",
    "    # 最后的 Grid\n",
    "    grid_chart = Grid()\n",
    "\n",
    "    # 这个是为了把 data.datas 这个数据写入到 html 中,还没想到怎么跨 series 传值\n",
    "    # demo 中的代码也是用全局变量传的\n",
    "    grid_chart.add_js_funcs(\"var barData = {}\".format(data[\"datas\"]))\n",
    "\n",
    "    # K线图和 MA5 的折线图\n",
    "    grid_chart.add(\n",
    "        overlap_kline_line,\n",
    "        grid_opts=opts.GridOpts(pos_left=\"3%\", pos_right=\"1%\", height=\"60%\"),\n",
    "    )\n",
    "    # Volumn 柱状图\n",
    "    grid_chart.add(\n",
    "        bar_1,\n",
    "        grid_opts=opts.GridOpts(\n",
    "            pos_left=\"3%\", pos_right=\"1%\", pos_top=\"71%\", height=\"10%\"\n",
    "        ),\n",
    "    )\n",
    "    # MACD DIFS DEAS\n",
    "    grid_chart.add(\n",
    "        overlap_bar_line,\n",
    "        grid_opts=opts.GridOpts(\n",
    "            pos_left=\"3%\", pos_right=\"1%\", pos_top=\"82%\", height=\"14%\"\n",
    "        ),\n",
    "    )\n",
    "    grid_chart.render(\"professional_kline_chart_2.html\")\n",
    "    grid_chart.render_notebook()\n",
    "\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    data = split_data(origin_data=echarts_data)\n",
    "    draw_chart()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
